Add Trend Line or Average Line to Chart

Environment

Product	Progress® Kendo UI® Chart for jQuery
Product Version	2018.2.516

Description

How can I add a trend line and/or an average line to the Chart?

Solution

The suggested approach is suitable for versions before Kendo UI 2024 Q1 (2024.1.130). With versions 2024 Q1 the Kendo UI for jQuery chart provide built-in trendline support. You can ;earn more here

1. Add an additional series with the average values to the Chart.
2. Remove the markers by using the visible property of the series so that the average values stand out as a line instead of a series.

html

<div id="example">
  <div class="demo-section k-content wide">
    <div id="chart" style="background: center no-repeat url('https://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png');"></div>
  </div>
  <script>
    $(document).ready(function() {
      $("#chart").kendoChart({
        title: {
          text: "Gross domestic product growth \n /GDP annual %/"
        },
        legend: {
          position: "bottom"
        },
        chartArea: {
          background: ""
        },
        seriesDefaults: {
          type: "line",
          style: "smooth"
        },
        series: [{
          name: "Trend",
          color: "red",
          markers:{
            size: 0
          },
          dashType: "dash",
          data: [-4, -2, 0, 2, 4, 6, 8, 10, 12]
        },{
          name: "World",
          data: [-5.988, -3.733, 1.464, 6.001, 3.539, 1.333, 8.245, 14.339, 10.727]
        }],
        valueAxis: {
          labels: {
            format: "{0}%"
          },
          line: {
            visible: false
          },
          axisCrossingValue: -10
        },
        categoryAxis: {
          categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
          majorGridLines: {
            visible: false
          },
          labels: {
            rotation: "auto"
          }
        },
        tooltip: {
          visible: true,
          format: "{0}%",
          template: "#= series.name #: #= value #"
        }
      });
    });
  </script>
</div>