Add Trend Line or Average Line to Chart

Environment

Product Chart for ProgressĀ® Kendo UIĀ®
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
Not finding the help you need? Improve this article