ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover

Question

I'm wondering if it's possible to label the radial axis' for each category differently which appear only when hovering over a value. Probably easiest to explain with an example. So in this picture, the "English" marks have a range of 50 -100 which pops up when I hover over one of the values on that axis

Radar chart axis 1

What I then want to happen is when i hover over the "Behaviour" category for example is the radial axis labels for that category to show up which are labelled differently.

Radar chart Axis 2

I know this might be difficult (or impossible) to do but is there a creative way in ChartJS or HighCharts where this might be possible?

Thanks!

Answer 1

This is possible with Highcharts. You need to only find a common scale, use multiple y-axis and mock labels and tooltip values, for example:

    var yLabels = [
        [60, 70, 80, 90, 100],
        ['Average', 'Satisfactory', 'Good', 'Excellent', 'Outstanding']
    ];

    Highcharts.chart('container', {
        yAxis: [...],
        xAxis: {
            lineWidth: 0,
            tickmarkPlacement: 'on',
            categories: ['English', 'Behaviour', 'Physics', 'Chemistry', 'Biology', 'History']
        },
        tooltip: {
            shared: true,
            formatter: function() {
                var points = this.points,
                    returnStr = this.x;

                points.forEach(function(point) {
                    returnStr += (
                        '<br />' + point.series.name + ': ' + yLabels[point.point.x][point.y - 1]
                    );
                });

                return returnStr;
            }
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function() {
                            this.series.chart.yAxis[this.x].update({
                                labels: {
                                    enabled: true
                                }
                            });
                        },
                        mouseOut: function() {
                            this.series.chart.yAxis[this.x].update({
                                labels: {
                                    enabled: false
                                }
                            }, false);
                        }
                    }
                }
            }
        },
        ...
    });

---

Live demo: http://jsfiddle.net/BlackLabel/82dyogrp/

API Reference:

https://api.highcharts.com/highcharts/pane

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/highcharts/tooltip.formatter