CODEWITHSUNDEEP
javascriptchart.js
Elliot
Elliot

Reputation: 13845

highlightFill for radar charts in chartJS

The bar charts in chartJS can change the fill color on highlight, using the highlightFill property:

http://www.chartjs.org/docs/#bar-chart-data-structure

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }
]};

The radar charts however, have no such property:

var data = {
    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};

Any ideas for how I might be able to extend the radar chart to be able to use that property?

Upvotes: 1

Views: 1038

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

A radar chart is different from the bar chart in that, an area is actually an entire series (for bar chart it is a single data point).

When you get a radar tooltip, and you think about what area of the chart it represents, you realize that it basically represents just 2 points radiating from the center. The area between 2 points of a series is actually shared between them. Highlighting half the area would not look nice either.

enter image description here

Add to that, the fact that one radar chart series could be completely covered by the 2nd one, I can't think of a non-confusing way to have a hover highlight for a radar chart (just think of how you would do highlighting for a line chart area - you don't. You do it only for a point)

enter image description here

Upvotes: 1

Related Questions