score:1
it's now built into chart.js 3:
https://www.chartjs.org/docs/latest/samples/line/segments.html
score:4
you can extend the chart to redraw the segment of your choice with the different color.
preview
script
chart.types.line.extend({
name: "linealt",
draw: function () {
chart.types.line.prototype.draw.apply(this, arguments);
var index = 1;
var datasetindex = 0;
var hasvalue = function(item){
return item.value !== null;
},
previouspoint = function (point, collection, index) {
return chart.helpers.findpreviouswhere(collection, hasvalue, index) || point;
};
var ctx = this.chart.ctx;
var dataset = this.datasets[datasetindex];
var pointswithvalues = chart.helpers.where(dataset.points, hasvalue);
ctx.strokestyle = 'red';
ctx.linewidth = 3;
ctx.beginpath();
var point = dataset.points[index];
ctx.moveto(point.x, point.y);
point = dataset.points[index + 1];
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();
}
});
and
...
new chart(ctx).linealt(data);
fiddle - http://jsfiddle.net/021xvuhd/10/
score:4
here's a working example to do this in charts.js 2
https://jsfiddle.net/egamegadrive16/zjdwr4fh/
var ctx = document.getelementbyid('mychart').getcontext('2d');
//adding custom chart type
chart.defaults.multicolorline = chart.defaults.line;
chart.controllers.multicolorline = chart.controllers.line.extend({
draw: function(ease) {
var
startindex = 0,
meta = this.getmeta(),
points = meta.data || [],
colors = this.getdataset().colors,
area = this.chart.chartarea,
originaldatasets = meta.dataset._children
.filter(function(data) {
return !isnan(data._view.y);
});
function _setcolor(newcolor, meta) {
meta.dataset._view.bordercolor = newcolor;
}
if (!colors) {
chart.controllers.line.prototype.draw.call(this, ease);
return;
}
for (var i = 2; i <= colors.length; i++) {
if (colors[i-1] !== colors[i]) {
_setcolor(colors[i-1], meta);
meta.dataset._children = originaldatasets.slice(startindex, i);
meta.dataset.draw();
startindex = i - 1;
}
}
meta.dataset._children = originaldatasets.slice(startindex);
meta.dataset.draw();
meta.dataset._children = originaldatasets;
points.foreach(function(point) {
point.draw(area);
});
}
});
var chart = new chart(ctx, {
// the type of chart we want to create
type: 'multicolorline',
// the data for our dataset
data: {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
bordercolor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
//first color is not important
colors: ['', 'red', 'green', 'blue']
}]
},
// configuration options go here
options: {}
});
source: https://github.com/chartjs/chart.js/issues/4895#issuecomment-342747042
Source: stackoverflow.com
Related Query
- How to change line segment color of a line graph in Chart.js?
- How to change line segment color based on label value in chart.js?
- How to use segment property to color line / border color based on value in chart js?
- How to change background color of labels in line chart from chart.js?
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- Chart.js: How can a line series (out of many) change line color and thickness upon mouse hover?
- how to set chart.js grid color for line chart
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- how to change color of bar if its goes above avg score in mixed graph chart.js
- How to add area with break on line chart with fill color
- Change Axis Line color in Chart created using chart.js
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- change stroke line color in chart according to datasets in react native
- How to change color of column in chart js
- How to change the chart line or area colors according to the user need?
- How to change color by clicking on the chart bar?
- Chart JS Line Graph multitooltipkey background color issue
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- ChartJS - How to change color of some data points in graph
- How to change line color based on data - chartist or chart.js
- how to change color of dots in graph using chart.js
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- how to set the color of all points in a line graph to the same in chart.js?
- How to fill a graph by a color till a vertical line using chart.js
- How to Add X axis Padding in chart js Line Graph
- How to change React line chart tooltip title font family in chart.js
- How do I change pointBackgroundColor in Line segment on ChartJS?
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- Line chart Change background color of shaded region on hover (Chartjs)
- How to change label color of ng2 chart in angular
More Query from same tag
- How to get the bands to implement in Chart.js the band extension?
- How to make the background color of the chart as gradient using Chart.js
- Bar chart from Chart.js not showing the second dataset
- show more dataset than labels in chart.js
- Chart Is Not Created
- Automatically update ChartJS with Knockout data-bind
- Chart JS can't access data from array within an object
- Chart.js - barchart - plugin labels
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- why i have this error Utils is not defined when i want create a chart from chart.js
- Is It Possible To Generate a ChartJS In C# Web API And Save Image?
- react-chartjs-2 time scale dates not formatting
- React-chartjs-2 update height dynamically
- Show values in Chart.js Pie chart parts
- How to create datasets dynamically for chart.js Line chart?
- Chart load time and animation slow on mobile device
- Angular chart showing series but no data
- Uncaught Error: [$injector:modulerr] Error: [$injector:nomod] Module 'chart.js' is not available
- Chart.js change legend toggle behaviour
- ChartJS dynamic label
- vb.net string to chartjs data field?
- ChartJS v2.6.0 unintended behaviour in Internet Explorer
- displaying the output on chart.js using Django and HTML
- How to pass variable (list) to JavaScript in Django?
- Embed unique identifier in Chart.js segments?
- Is possible convert an associative array in indexed array in php?
- Set default line style in chart.js
- How to show Charts.js lables
- ChartJS xAxis time formats don't change for days
- How to add variable-pie chart to react project?