Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy