I have a time line chart type. I would like to define color on every step between two dots depending on dataset object values.
In my dataset data array I have added a third item which will define the color ( if < 30 ==> green / >30 ==> red )
Actually I'm trying to only use red color.
I have found a working example ,on how do do that. but it's based on non-time chart type.
I have tried to adapt it to my example but I get error in last step
ctx.bezierCurveTo(
previous.controlPoints.outer.x,
previous.controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
"Uncaught TypeError: Cannot read property 'outer' of undefined",
Here a reproduction
var canvas = document.getElementById('myChart');
let customLine = Chart.controllers.line.extend({
name: 'line',
draw: function() {
Chart.controllers.line.prototype.draw.apply(this, arguments);
let datasetLength = this.chart.config.data.datasets.length;
for (let i = 0; i < datasetLength; i++) {
for (let j = 0; j < this.chart.config.data.datasets[i].data.length; j++) {
var index = j;
var datasetIndex = i;
var hasValue = function(item) {
return item.y !== null;
},
previousPoint = function(point, collection, index) {
return Chart.helpers.findPreviousWhere(collection, hasValue, index) || point;
};
var ctx = this.chart.ctx;
var dataset = this.chart.config.data.datasets[datasetIndex];
var pointsWithValues = Chart.helpers.where(dataset.data, hasValue);
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.beginPath();
var point = dataset.data[index];
ctx.moveTo(point.x, point.y);
point = dataset.data[index + 1];
console.log(point)
var previous = previousPoint(point, pointsWithValues, index + 1);
ctx.bezierCurveTo(
previous.controlPoints.outer.x,
previous.controlPoints.outer.y,
point.controlPoints.inner.x,
point.controlPoints.inner.y,
point.x,
point.y
);
ctx.stroke();
}
}
}
});
Chart.controllers.customLine = customLine;
var config = {
"options": {"scales": {"xAxes": [
{"type": 'time',"time": {"unit": 'minute',"unitStepSize": 60,
},
"distribution": 'linear',"bounds": 'ticks',"ticks": {"source": 'auto',"autoSkip": true,"stepSize": 10
}
}
],
},
},"data": {"labels": ['2016-04-18T00:00:00Z', '2016-04-18T23:59:00Z'],"datasets": [
{"label": "line","type": "customLine","backgroundColor": "#00b","borderColor": "#00b",
//"yAxisID": "axis4","borderWidth": 1,"fill": false,"data": [
{x:"2016-04-18T01:00:00Z", y:1,z:10},
{x:"2016-04-18T04:00:00Z", y:2,z:20},
{x:"2016-04-18T06:00:00Z", y:3,z:60},
{x:"2016-04-18T08:00:00Z", y:7,z:70},
{x:"2016-04-18T10:00:00Z", y:1,z:30},
{x:"2016-04-18T14:00:00Z", y:3,z:100}
]
},
]
},
};
var myBarChart = Chart.Line(canvas, config);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script><canvas id="myChart" width="400" height="200"></canvas>
