score:0

Accepted answer

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


Related Query

More Query from same tag