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

Remove Gradient Effects in the Chart

Environment

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

Description

How can I remove the emboss effect from a Kendo UI Bar Chart?

Solution

Some Kendo UI themes default to displaying a slight gradient in their Charts. To remove that effect from a graph like the Bar chart, set the series.overlay.gradient property to none.

$("#chart").kendoChart({
  series: [ {
    overlay: {
      gradient: "none"
    }
  }]
  ...
});

If the Kendo UI Chart contains more than one series, use the seriesDefaults.overlay.gradient property to remove all gradients with a single setting.

The following example demonstrates how to render the bars in the Kendo UI Chart in a flat appearance.

    <div id="chart"></div>
    <script>
      $("#chart").kendoChart({
        series: [ {
          type: "bar",
          overlay: {
            gradient: "none"
          },

          data: [ 1, 2, 3]
        }]
      });
    </script>

See Also

In this article