Create Chart Gradients from Left to Right with Multi-Color Values
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create left-to-right gradients with multi-color values in the Chart?
Solution
The following example demonstrates how to create such gradients with three-color values.
<div id="chart" />
<script>
kendo.dataviz.Gradients.series1Gradient = {
type: "linear",
stops: [{
offset: 0,
color: "#fff",
opacity: 0.5
}, {
offset: 1,
color: "#000"
}]
};
kendo.dataviz.Gradients.series2Gradient = {
type: "linear",
stops: [{
offset: 0,
color: "#00acc1",
opacity: 0.5
}, {
offset: 1,
color: "#80deea"
}]
};
kendo.dataviz.Gradients.series3Gradient = {
type: "linear",
stops: [{
offset: 0,
color: "#ffbf46",
opacity: 0.5
}, {
offset: 1,
color: "#ffd78c"
}]
};
$("#chart").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000],
overlay: {
gradient: "series1Gradient",
start: [0, 0.5],
end: [1, 0.5]
},
border: {
width: 0
}
}, {
name: "Total Visits",
data: [86000, 23000, 44000, 21000, 57000, 168000],
overlay: {
gradient: "series2Gradient",
start: [0.5, 0],
end: [0.5, 1]
},
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000],
overlay: {
gradient: "series3Gradient",
start: [0.5, 0],
end: [0.5, 1]
},
}],
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
</script>