score:1
Accepted answer
You could define a second dataset that does nothing but drawing the gray space up to the limit of 100.
{
backgroundColor: '#DDD',
hoverBackgroundColor: '#DDD',
data: [100, 0, 0, 0, 100, 100],
datalabels: {
display: false
}
},
Also make sure that only the x-axis has the option stacked: true
.
Together with this, you'll also need to adjust some other options. A tooltip.filter
for example will prevent Chart.js from showing a tooltip for the second dataset.
tooltip: {
filter: tooltipItem => !tooltipItem.datasetIndex
},
Please take a look at the StackBlitz with your amended code and see how it works.
Source: stackoverflow.com
Related Query
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- How to draw multiple color bar in a bar chart using chart.js
- How do I draw a vertical line on a horizontal bar chart with ChartJS?
- How to draw Horizontal line on Bar Chart Chartjs
- Draw stacked horizontal bar chart with Average line using ChartJS
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- How to use set the color for each bar in a bar chart using chartjs?
- Chart.js - draw horizontal line in Bar Chart (type bar)
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- How to Draw a line on chart without a plot point using chart.js
- how to draw Line chart using chart.js and datalabels should be shown
- How to achieve a mixed chart of 'horizontal' bars and line chart using Chart.js?
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- how to modify horizontal bar chart using chart js
- How to draw a horizontal line over bar columns in Chart.js that's started from X axis?
- How do I draw horizontal bars with a label using either ChartJS or D3?
- How to add vertical line in bar chart using chartJs and ng2-charts?
- How to set percentage value by default on each bars in horizontal bar chart js
- how to create bar chart with group and sam color for each group using chart.js?
- Draw horizontal line on chart in chart.js on v2
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chart.js Bar Chart - how to chart bars from 0
- How to add an on click event to my Line chart using Chart.js
- How to Draw Gantt chart using chart js or other libraries
- How to set labels align left in Horizontal Bar using chart.js?
- How can I draw dotted line using chartjs?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to create stacked bar chart using react-chartjs-2?
- Chart.js - Draw bar chart with multiple labels
- Draw a horizontal and vertical line on mouse hover in chart js
More Query from same tag
- Chartjs Legend Styling
- chart.js onAnimationProgress progress percentage
- break y axis in line chart chart.js
- ChartJS in Datatable cell performance
- How to make lines in line charts from ng2-charts straight lines?
- Error: Cannot read property 'props' of undefined, Calling parent Method in Child
- Accessing data in an associative array in CodeIgniter 3
- Angular 9 - chartjs-plugin-annotation error
- ChartJS Stacked Group with labels on each bars
- chart.js Legends issue (not showing)
- angular-chart.js custom color based on chart label values
- ReactJS - Labeling multi dimension array with chartJS-2
- Highlight area programmatically - Chart.js
- Array of objects condensed into array of unique objects with nested array
- Chartjs v2 xAxes label overlap with scaleLabel
- Chart.js -> line chart -> multiple points with the same X
- Angular 8 and ng2 charts - Updating labels and data
- How to get chart size (without labels) with chart.js?
- Using chartJs in a Vue Component and a Webpack cli setup
- Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?
- multiple chartjs charts with the same configuration but different data
- injecting chart.js sparkline to jqxGrid widget in Angular with typescript
- Datasets in Chart.js stacked barchart appear overlaid instead of stacked
- How can I change the starting point of horizontal bars in Charts.js
- Angular2 and ng2-charts does not display any graph
- Chart.js changing the color of the max value bar
- Issue with int numbers using chart.js
- angular-chart.js : how to show numbers in each bar of stacked bar chart
- How to send an array of object as a prop?
- chartjs show 24 hours in line chart