CODEWITHSUNDEEP
chart.js2
Lukich
Lukich

Reputation: 716

Dynamically repainting part of Chart.js background

I have a graph, constructed in Chart.js, which displays a certain performance metric that it dynamically receives. One of the things I was asked to do was to draw three bands on the background - red, yellow and green, that give a user a visual clue as to whether the metrics value is good, bad or average. I did it by extending a line version of chart.js and in the draw function of it painting my bands of colors in canvas.

It works well, if I know what the largest possible value is. Then I can define the max tick as that value and use that same value as a top point to draw my red band. However, if I don't know what the largest value would be, as soon as something larger arrives, the chart automatically scales to accommodate it, and I end up getting a white band above the red one.

Is there some way to dynamically redraw parts of the background after it was instantiated? The only thing I was able to think of was to add an "animation.onComplete" handler to repaint the background then. The problem, however, is that on the next value received, my newly painted background vanishes, so I assume I go about it the wrong way.

Upvotes: 1

Views: 283

Answers (1)

Rasheed
Rasheed

Reputation: 1051

I am not sure if this may help, but the approach i have used that worked for me based on my experience with Chat.js is that, i create my Chat.js options once and only once, and then the chat data object is recreated every time i have new records. This actually works for me tho, i hope it works for you.

Upvotes: 1

Related Questions