how to highlight a specific area on chartjs line chart

Question

I am using chartjs to draw a line chart on my application. I have dates onx-axis but as a category scale. Means labels are strings but are dates. On the y-axis i have numeric values. I am changing the chart on some functionality and after change i want to highlight some area of the chart. Is there any way i can highlight an area on the line chart? I have searched but did not find anything.

I want to do this pragmatically like there are some specific dates which i want to highlight so i want to have this type of effect.

Any kind of help would be much appreciated. I am very beginner in charts and javascript stuff.

P.S this is specifically for the line chart not for the doughnut

Same as https://stackoverflow.com/questions/31244698/chart-js-line-chart-with-different-background-colors-for-each-section — Artier, Dec 14 '17 at 15:49
@Artier Mate i dont know why you are giving me the links but not reading my question. This is in chartjs1. Secondly ok i want to change the background but how ? My questions are not addressed in both questions you have given me. — fat potato, Dec 14 '17 at 16:04
To everyone who googled this: [here's a much better answer](https://stackoverflow.com/questions/47108389/how-to-make-rectangle-in-chart-js) — ᴍᴇʜᴏᴠ, Dec 10 '20 at 15:49

score 4 · Accepted Answer · answered Dec 14 '17 at 16:26

4

I use this https://github.com/chartjs/chartjs-plugin-annotation lib to do something like this.check on it. I think this will helpful.

answered Dec 14 '17 at 16:26

Janaka Pushpakumara

4,769
5
29
34

Thanks for the help. But will it fill the color between the charts. ? – fat potato Dec 14 '17 at 16:30
@fatpotato I think you can do it. This is sample https://codepen.io/compwright/full/mmQMrZ/ – Janaka Pushpakumara Dec 14 '17 at 16:33
Let me test this – fat potato Dec 14 '17 at 16:39
It is nice to hear @fatpotato . – Janaka Pushpakumara Dec 18 '17 at 11:33
This is nice, but can we get a title over the highlighted area? – Dr. House Sep 11 '19 at 22:52

how to highlight a specific area on chartjs line chart

1 Answers1