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>