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
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.
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!
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