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