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
- react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?
- Create a prop for a chart.js pie chart
- Calculate Ideal Burndown
- How to generate color code dynamically by swapping 2 characters within a string using PHP
- I am getting TS2339: Property 'chart' does not exist on type 'Window'?
- build dynamic array for charts.js
- How do I connect to a PostgreSQL database on Heroku server and use Chart.js?
- Vue grouping items by key then charting similar keys in one chart
- How to chart detected activities on the hour using Chart.js
- Chartjs Exporting ImageExports Empty Dark Image
- On hover bar is overlapped by label chartjs
- copy object in Chart.js
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Unexpected behavior with chart.js
- charts.js global options gridLines
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- ChartJs: X Axis labels cutting at bottom
- How to distribute the y-ticks proportionally in Chart.js in Flask app?
- Is it possible to show labels for all lines?
- I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options
- Chart.js maxBarThickness is deprecated in angular 8
- Datalabels plugin throws error when using scriptable option
- How To Format Scale Numbers in Chart.js v2
- Chart.js x-axis time doesn't show values when using combined (mixed) charts
- How to display chart in android tv using web view(chart.js)
- Chart.js 2.0: How to change title of tooltip
- Using data in HTML to display ChartJS Doughnut chart
- update charjs dataset using react library
- PaddingLeft of afterFit does not work during chart.js option
- Place Text in Chart-Canvas Area in ChartJS