Trendlines in EJ 1 ASP.NET Core Chart

Chart can generate trendlines for Cartesian type series such as line, column, scatter, area, candle, HiLo, etc., except bar type series. You can add more than one trendline object to the Trendlines option.

  • cshtml
  • <ej-chart id="chartContainer">
    // ...
    <e-chart-series>
        <e-series>
            <e-trend-lines>
                <e-trend-line visibility="Visible"></e-trend-line>
            </e-trend-lines>
        </e-series>
    </e-chart-series>
    // ...
    </ej-chart>

    Trendlines_img1

    Customize the trendline styles

    A trendline can be customized by using the properties such as Fill, Width, DashArray, and Opacity. The default type of trendline is Linear.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line fill="#99CCFF" width="3" opacity="1" dash-array="2,3"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img2

    Types of trendline

    Chart supports the following types of Trendline:

    • Linear
    • Exponential
    • Logarithmic
    • Power
    • Polynomial
    • MovingAverage

    Linear

    To render linear trendline, set the type to Linear.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line type="Linear"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img3

    Exponential

    Exponential trendline can be rendered by setting the type to Exponential.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line type="Exponential"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img4

    Logarithmic

    Logarithmic trendline can be rendered by setting the type to Logarithmic.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line type="Logarithmic"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img5

    Power

    Power trendline can be rendered by setting the type to Power.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line type="Power"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img6

    Polynomial

    Polynomial trendline can be rendered by setting the type to Polynomial. You can change the polynomial order by using the PolynomialOrder property of the trendlines. It ranges from 2 to 6.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line type="Polynomial"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img7

    MovingAverage

    Moving average trendline can be rendered by setting the type to MovingAverage.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line type="MovingAverage"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img8

    Forecasting

    Trendline forecasting is the prediction of future/past situations. Forecasting can be classified as the following two types:

    • Forward Forecasting
    • Backward Forecasting

    Forward forecasting

    The value set for ForwardForecast is used to determine the distance moving towards the future trend.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line forward-forecast="5"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img9

    Backward forecasting

    The value set for the BackwardForecast is used to determine the past trends.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line backward-forecast="5"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img10

    Trendlines legend

    To display the legend item for trendline, use the Name property. You can interact with the trendline legends similar to the series legends, i.e. show/hide trendlines on legend click.

  • cshtml
  • <ej-chart id="chartContainer">
        // ...
        <e-chart-series>
            <e-series>
                <e-trend-lines>
                    <e-trend-line name="Linear"></e-trend-line>
                </e-trend-lines>
            </e-series>
        </e-chart-series>
        // ...
    </ej-chart>

    Trendlines_img11