New to Kendo UI for jQuery? Download free 30-day trial

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

  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.
<div id="example">
  <div class="demo-section k-content wide">
    <div id="chart" style="background: center no-repeat url('../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>
In this article