Changing color of dataSeries if any y value is above threshold - CanvasJS Javascript HTML 5 Chart
Changing color of dataSeries if any y value is above threshold - CanvasJS Javascript HTML 5 Chart
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart_loss" style="height: 300px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chart_loss", {
legend: {
horizontalAlign: "bottom", // "center" , "right"
verticalAlign: "bottom", // "top" , "bottom"
fontSize: 15
},
animationEnabled: true,
animationDuration: 10000,
axisX: {
minimum: 1,
maximum: 25,
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "year #",
labelFontSize: "12",
labelFontColor: "#00557F",
labelFontWeight: "bold"
},
axisY: {
minimum: 900,
maximum: 1500,
labelFontSize: "12",
labelFontColor: "#00557F",
labelFontWeight: "bold",
title: "Generation in (kwh)",
titleFontColor: "#00557F",
titleFontWeight: "bold",
titleFontSize: "16",
labelFormatter: function(e) {
return "" + CanvasJS.formatNumber(e.value, "#,#00");
},
includeZero: false
},
toolTip: {
shared: true
},
data: [
{
color: "#673AB7",
fillOpacity: .9,
xValueFormatString: "Year #",
yValueFormatString: "#### Units",
showInLegend: true,
legendText: "Ideal",
type: "splineArea",
name: "Ideal",
dataPoints: [{
x: 1,
y: 1500
}, {
x: 2,
y: 1463
}, {
x: 3,
y: 1455
}, {
x: 4,
y: 1448
}, {
x: 5,
y: 1441
}, {
x: 6,
y: 1433
}, {
x: 7,
y: 1426
}, {
...