score:1
Accepted answer
if you make sure your last points fall outside of the chartarea so the line contiues to keep going it will fill correclty:
const options = {
type: 'line',
data: {
datasets: [{
label: '# of votes',
data: [{
x: 0,
y: 20
}, {
x: 30,
y: 0
}],
}, {
label: '# of points',
fill: '-1',
data: [{
x: 0,
y: 15
}, {
x: 25,
y: 0
}],
}]
},
options: {
scales: {
x: {
type: 'linear',
min: 10,
max: 20
},
y: {
min: 0,
max: 20
}
}
}
}
const ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.js"></script>
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
</body>
Source: stackoverflow.com
Related Query
- Creating a diagonal shaded area in chart.js
- how to not repeat code while creating multiple charts in chart js
- Chart area background color chartjs
- Creating chart.js chart directly to PNG in Node js?
- Hover/click area in filled line chart in chart.js
- chartjs - top and bottom padding of a chart area
- Center point labels between ticks (Polar Area Chart JS)
- Fill Chart.js bar chart with diagonal stripes or other patterns
- Creating a horizontal bar chart extension on Chart.js
- Creating a grouped and stacked chart in Chart.js
- Chart.js line chart with area range
- Chart.js - Creating Custom Chart Types
- ChartJS disable gridlines outside chart area
- Using Chart.js - Creating Legend for Doughnut Chart
- How to add label in chart.js for polar chart area
- ERROR TypeError: "this.canvas is undefined" | Problem with creating a chart with angular and chart.js
- How to add area with break on line chart with fill color
- Background-color for area below line chart in chartJs?
- How to use JSON data in creating a chart with chartjs?
- Polar Area Chart
- How can I style scale numbers in a Polar Area chart (chart.js)
- Want only line not area under it in chart js
- how to highlight a specific area on chartjs line chart
- How to change the chart line or area colors according to the user need?
- How to remove or color line/grid in polar chart area using Chart.js?
- Background color of the chart area in chartjs not working
- Chart.js Polar Area Chart is not scale right
- How to increase space between label and chart area in chart.js
- How do I remove the ticks or inner circles of my polar area chart Chart.js
- Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)
More Query from same tag
- Need help adding Chart.js chart to a Modal window (I'm Using AngularJS)
- How do I make line charts overlay over bar charts in chartjs
- How to draw x axis and y-axis origin line draw in ng2-google-charts?
- Cannot get react-chartjs options to take effect
- jQuery - destroy and rebuild chart with original options
- ChartJS stacked bar chart not displaying as stacked
- ChartJS: Grouped Stacked Bar Chart not Grouping
- ChartJS keeps adding one day to X axis. I cannot find a reason. Any suggestion?
- php to json to chart.js
- Python list does not work in django with ChartJS
- Chart Js Doughnut chart giving error
- Gradient colour in backgroundColor JS
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Chart.js not displaying in box
- How to add images as labels to Canvas Charts using chart.js
- Chart.js - make barchart element blink
- Add a text as tooltip for each point on a line chart
- Updating in chart.js
- Switching between Charts with chart.js using Buttons
- Vue-Charts label numbers to the side of a bar chart
- ChartJS set yAxes "ticks"
- React chart : prevent chart's canvas scaling with height and width
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- Values above points - chart.js
- How to add area with break on line chart with fill color
- new dataset is not accepted by chartj template
- I want to hide the label in a tooltip because it shows undefined
- How to create a linechart with Chart.JS (not filled)
- ChartsJS get value of Data/Dataset Label for Tooltip
- How to fill a graph by a color till a vertical line using chart.js