score:6
Accepted answer
Filling / Coloring the Area between Lines
Just extend the chart to write your own fill logic.
Note that the animation is a bit weird because of the filling logic. It would be easier to turn off the animation to fix this, or you could try a variation of https://stackoverflow.com/a/33932975/360067 to animate from the 0 line.
Preview
Script
Chart.types.Line.extend({
name: "LineAlt",
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var ctx = this.chart.ctx;
var scale = this.scale;
ctx.save();
ctx.fillStyle = this.datasets[0].fillColor;
ctx.beginPath();
ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
this.datasets[0].points.forEach(function (point) {
ctx.lineTo(point.x, point.y);
})
ctx.closePath();
ctx.fill();
ctx.fillStyle = this.datasets[1].fillColor;
ctx.beginPath();
ctx.moveTo(scale.calculateX(0), scale.calculateY(0))
this.datasets[1].points.forEach(function (point) {
ctx.lineTo(point.x, point.y);
})
ctx.closePath();
ctx.fill();
ctx.restore();
}
});
...
var myNewChart = new Chart(ctx).LineAlt(chartData, {
bezierCurve: false,
datasetFill: false
});
Fiddle - https://jsfiddle.net/fhxv0vL7/
score:0
This is available with a plugin using the latest (not in beta) version of charts
https://www.chartjs.org/docs/master/charts/area/#example-with-multiple-colors
Source: stackoverflow.com
Related Query
- chart.js LIne Graphs: Fill area above line as opposed to below and to the right
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- ChartJS Line chart cut off at the top and bottom
- How to add area with break on line chart with fill color
- Background-color for area below line chart in chartJs?
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
- How to change the chart line or area colors according to the user need?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- Chart.js : How to fill the area under the line to a certain point?
- How to configure chart.js line chart with very low minimum height, and only 0 and 1 (no decimals) as ticks on the y-axis
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- Line chart with combination of fill and line
- Show multiple line graphs on the same chart using chart JS
- Remove the vertical line in the chart js line chart
- Moving vertical line when hovering over the chart using chart.js
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js line chart is cut off at the top?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Hover/click area in filled line chart in chart.js
- chartjs - top and bottom padding of a chart area
- Draw a horizontal and vertical line on mouse hover in chart js
- How to align Chart.JS line chart labels to the center
More Query from same tag
- Pass Ajax response array to Chart.js
- Chartjs cannot read property datasets of undefined
- Chart.js canvas, how can I swap data without the previous data affecting my hover events?
- Convert date label on Y-axis Line Chart to specific date format
- How to add text at end of each line in charts.js
- How to use major tick marks in chart.js 2.9.3?
- Understanding Chart.js and Adding Legends to Pie Charts
- How to disable click in graph ChartJS
- Make Chart.js canvas responsive inside the resizeable div
- Smallest values are invisible in ng2-charts bar charts
- chart.js Line chart doesn't display line past a certain point in the chart
- Export chart.js canvas to prawn-pdf in rails
- Animation chart js (line), animate chart drawing line by line
- angular 5 reset chart js bar in same component
- Chartjs - How to get last 7 days on x-axis labels?
- Ajax asynchronicity calls end function before inner loop function
- How to remove a label in top of bar in chartjs chart
- Unix Timestamp Chart.js with PHP echo
- Tiny error in the ChartJs book
- Get X, Y onClick chart coordinates in ChartJS
- Chart js - set width to a specific bar
- Hide or show two datasets with one click event of legend in chart.js
- Add padding between two y-axis scales using chart.js
- change space between horizontal (grid) lines for line chart
- Exponential decrease
- chart.js - display control timescale time zone
- Issue regards data in charts JS
- How to create dynamically chart for Ionic App with Firebase data?
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Plot time on Y axis