score:7
Accepted answer
Why not using simply the annotation plugin?
Here is your example with annotation plugin, using Box annotations:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: 'Season 1',
data: [12, 17, 3, 5, 9, 3],
fill: false,
borderColor: 'rgba(0, 200, 0, 1)'
},
{
label: 'Season 2',
data: [5, 14, 3, 15, 9, 13],
fill: false,
borderColor: 'rgba(200, 0, 0, 1)'
}
]
},
options: {
scales: {
yAxes: [{
id: 'y-axis-1',
ticks: {
beginAtZero:true
}
}]
},
annotation: {
drawTime: "afterDraw",
annotations: [{
id: 'box1',
type: 'box',
yScaleID: 'y-axis-1',
yMin: 0,
yMax: 6,
backgroundColor: 'rgba(100, 100, 100, 0.2)',
borderColor: 'rgba(100, 100, 100, 0.2)',
},{
id: 'box2',
type: 'box',
yScaleID: 'y-axis-1',
yMin: 6,
yMax: 12,
backgroundColor: 'rgba(200, 100, 200, 0.2)',
borderColor: 'rgba(200, 100, 200, 0.2)',
},{
id: 'box3',
type: 'box',
yScaleID: 'y-axis-1',
yMin: 12,
yMax: 18,
backgroundColor: 'rgba(0, 100, 200, 0.2)',
borderColor: 'rgba(0, 100, 200, 0.2)',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
And this is your fiddle updated: https://jsfiddle.net/beaver71/50L21shp/
Source: stackoverflow.com
Related Query
- Multiple Range Highlighting of Background in Chart.js
- Acceptable Range Highlighting of Background in Chart.js 2.0
- react-chartjs-2 how to set multiple background levels within a line chart
- how to not repeat code while creating multiple charts in chart js
- Chart area background color chartjs
- Chart.js line chart set background color
- How to save Chart JS charts as image without black background using blobs and filesaver?
- chart.js Line chart with different background colors for each section
- set background color to save canvas chart
- Chart.js - Draw bar chart with multiple labels
- Chart JS show multiple data points for the same label
- Chart js different background for y axis
- how to create multiple chart on one component vue
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Chart.js line chart with area range
- Chart JS — Conditional horizontal row background colours
- X-axis multiple colored label for bar chart using chart.js
- Multiple stacked bar chart using ChartJs
- Multiple line labels for chart js
- Chart.js - Color specific parts of the background in a line chart
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- How to add gradient background to Line Chart [vue-chart.js]
- Date range picker and chart js
- Update Chart JS with date range selector
- How to add multiple background color in line charts
- Group Chart with multiple layers in ChartJS
- How to add background image in bar chart column in Chart.js?
- ng2 chart multiple chart update
- Dynamicly update scatter/line chart in Chart.JS with multiple x/y grids
- Multiple bubble chart datasets for chartjs
More Query from same tag
- ChatJS 2.8 chaning x-Axis font style and color
- Render chartjs and export image to data not in the DOM
- use navigator clipboard to store image/png from canvas blob
- Consuming an API and displaying items in chart/Angular
- How can I set the yAxis scale for the chart?
- Grouping the object by key for Chartjs bar chart
- Chartjs unexpected resize and crop after updating data. Using laravel blade view and Livewire
- How to rotate custom marker in chart.js?
- Update chart axis labels after hover - chart.js
- Format Chart.JS Data Element To Be Currency
- Change 'points' on a line chart to donuts using Chart.js
- Pass context to options on React ChartJS 2
- Changing Chart.js chart type doesn't remove older axis
- how to change dynamically yAxes in chart.js
- destroy method implementation in pie chart chartjs
- ChartJs title not showing
- Popup windows for histogram with AngularJS
- Angular-chart.js Configuration
- How to create chart from a dict?
- Horizontal stacked bar chart with chart.js
- Chartjs change grid line color
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How do I correctly include Moment.js and Chart.js with RequireJS when I want to create charts with time scales?
- ChartJS: Chart not displaying full range of data
- Change pointer line style
- Add chart using chart.js in codeigniter
- Vertical spacing in horizontal ChartJS Bar Graph
- How to add space between datasets in ng2 doughnut chart
- ChartJS and Radar Chart animation
- Unable to access data in collection for chart.js