score:1
Accepted answer
The documentation isn't obvious, and it's under 'Area charts', but you can control the 'direction' of the fill using the fill
option.
I find it easier looking at the sample charts that clearly show what each option does.
Setting fill: 'start'
in the dataset reverses the effect in your chart:
var ctx = document.getElementById('all-canvas').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#ca38d4');
gradientStroke.addColorStop(1, '#d43842');
var myChart = new Chart(ctx, {
"type": "line",
"data": {
"labels": ["september", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July"],
"datasets": [{
"data": [75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 78.833333333333, 70, 72.333333333333],
"fill": 'start',
backgroundColor: gradientStroke,
borderColor: gradientStroke,
"spanGaps": false,
radius: 0
}]
},
"options": {
"legend": {
"display": false
},
scales: {
yAxes: [{
ticks: {
fontColor: "transparent",
padding: 20,
beginAtZero: true,
reverse: true
},
gridLines: {
drawTicks: false,
display: false
}
}],
xAxes: [{
gridLines: {
drawTicks: false,
display: false
},
ticks: {
padding: 20,
fontColor: "transparent"
}
}]
}
}
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="all-canvas"></canvas>
Source: stackoverflow.com
Related Query
- Having problems getting a line chart in Chartsjs to go *up* to 1, with bkg fill *under* the chart line
- How to add area with break on line chart with fill color
- Chart Js Line chart with fill on click with full information of its legend text
- Angular-Chart-JS - Line chart with different fill colors according to points' range
- Line chart with combination of fill and line
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- line chart with {x, y} point data displays only 2 values
- Display line chart with connected dots using chartJS
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js - line chart with two yAxis: "TypeError: yScale is undefined"
- How to display Line Chart dataset point labels with Chart.js?
- chart js how to fill legend box with colour
- Chart.js Mixed Bar and Line chart with different scales
- chart.js Line chart with different background colors for each section
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Chart.js: Line chart with partial dashed line
- Obtain max value of y axis of line chart rendered with Chart.js
- ChartJS - Line Chart with different size datasets
- Line chart with large number of labels on X axis
- Fill Chart.js bar chart with diagonal stripes or other patterns
- How to create a gradient fill line chart in latest Chart JS version (3.3.2)?
- ChartJS - Line chart issue with only 1 point
- ChartJs line chart - display permanent icon above some data points with text on hover
- Is it possible to revert x-axe values in line chart with chart.js
- Drawing line chart in chart.js with json response
- Getting chart js bar chart to fill window
- Chart.js line chart with area range
- Extending Line Chart with custom line
- Can we draw a Line Chart with both solid and dotted line in it?
More Query from same tag
- Remove background color in chartjs line chart
- Map JSON for Chartjs with Angular 7
- Run the function on load
- ChartJS: Blank page | what is going wrong?
- Chartjs scaleLabel position
- Multi- Line title in chart.js not working
- How to disable converting decimal number to exponential?
- How to display label inside pie chart in Chartkick?
- Angular PrimeNG Chart Module: Customize hover text
- Create space between legend and chart in charts.js
- ChartJS: Is it possible to omit last grid line to save space
- Changing the background of a ChartJS on node js
- angular 7 how to draw dynamic number of charts
- two xAxes horizontal bar chart Charts.js
- How to customize chart js Bar chart shape?
- Datalabels not showing on Chart.js
- react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
- Bar chart does not appear with Chart.js
- how to show bar graph on y axis in charjs
- Chartjs disable color change on hover withouth disabling tooltips
- multiple horizontal bar charts to display in same row
- Chart js how to toggle line without click
- Unable to clone a Chart.js chart in a pop up
- Chartjs 2 - Stacked bar with marker on top
- How Do I Properly Install/Access Javascript Library
- Combine Chart.js programmatic and legend based dataset toggling
- Change background transparency of Chart.js chart
- Full size download Chartjs canvas on mobile device
- Chart.js max legend height
- Chart.js -> Displaying % on pie chart