Customized radar chart (multiple backgroundColor's & registering elements to an existing chart's registry)

[J4L0]

For a poc I am looking for a charting lib. that allows me to create to following kind of radar chart:

It appears to me, that chartjs is delivering most of the pieces out of the box, but the missing piece is the coloured background.
As visible, depending on the radius a different background colour is being used , which characterize scores in my case.

As of what I found so far, the property backgroundColor is based on dataset and does therefore not come in handy.
My current guess is, writing a plugin based on the following example from canvas background which alters the colour of the whole canvas:

const plugin = {
    id: 'custom_canvas_background_color',
    beforeDraw: (chart, args, options) => {
    // code here
    },
}

Another idea I had, is pre-drawing the grid with a certain fill colour, but not sure how that could be done.
As a js and chartjs newbie I am open for suggestions, ideas and a lil bit of support.

Thanks already!

[J4L0]

I was working on the above chart (adjustments to the radar chart) in the last days and could almost finish it.
The one thing that still boggles me, are the black points. I am able to draw them simply as dots, but I need them to be a point element.

I read that it is possible to register point elements, I've seen it in tests but I couldn't yet figure out how to do it properly.

So my question: How to register new elements (line, point, etc.) from within a plugin, so that all the features (like interactions or tooltip) of an element can be used?

Thanks for the answer!

[Udemology]

You can draw shapes of any type, this video might help: https://youtu.be/HBq9ghvHp0g

[J4L0]

Thank you for the answer, but nevertheless I wasn't asking about drawing shapes, I can draw stuff with canvas.
But what I need to do, is creating the black points shown in the chart above as point elements and register them to the chart's registry, so that built in tooltips etc. are working.

I just don't know how to do it properly 💡 .
In the video shown, he basically ends up with what I have right now.

[J4L0]

Is there nobody that already came across this situation or knows how to register your own elements, instead of just drawing unconnected stuff?

[foxsoftltd]

Hi @J4L0 - did you have any joy with the background colours, as shown in your example? If so, can you please share your code?

I need to do the same thing (represent traffic lights with red in the middle, then amber, and green around the outside).

Thank you