How to show legend like Maps' in Line diagram in Highcharts?

1
votes

I'm using Highcharts,

I want to have a legend like Maps instead of default Line graph's legend, for specific line only.

For example, using this legend

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/

        legend: {
            layout: 'horizontal',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.85)',
            floating: true,
            verticalAlign: 'top',
            y: 25
        },

instead of

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },

in this example, having "Tokyo" numbers in details.

Any Ideas??

1
highcharts

1 Answers

1
votes

In general, it's not supported, but you can try to add such functionality from maps to the standard charts: http://jsfiddle.net/w9nuha8n/

(function (H) {
    // add colorAxis
    H.seriesTypes.line.prototype.axisTypes = ['xAxis', 'yAxis', 'colorAxis']; 
    H.seriesTypes.line.prototype.optionalAxis = 'colorAxis';

    // draw points and add setting colors
    H.wrap(H.seriesTypes.line.prototype, "translate", function (p) {
        p.call(this);
        H.seriesTypes.heatmap.prototype.translateColors.call(this);
    });

    // copy method from heatmap for color mixin
    H.seriesTypes.line.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors; 

    // use "y" to calculate color
    H.seriesTypes.line.prototype.colorKey = 'y';
})(Highcharts);