javascript - Custom Highcharts legend symbol - Stack Overflow

admin管理员组

文章数量:1393874

I want to override the legend symbols in Highcharts. But I cannnot see any way of doing this. The Highcharts Legend API has a "labelFormatter" function but nothing to format the symbol. My jsfiddle is here.

My code is:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

You can see the legend symbol for Tokyo is a blue circle with a line running through it. I want to override this with my own custom legend.

The Legend API allows you to set properties such as symbol width (symbolWidth), padding (symbolPadding) etc. But seeminlgy there is no way to actually replace the symbol.

There is a property "useHTML" which sounds useful. Any ideas?

EDIT The legend needs to change, but the marker on the graph should not

I want to override the legend symbols in Highcharts. But I cannnot see any way of doing this. The Highcharts Legend API has a "labelFormatter" function but nothing to format the symbol. My jsfiddle is here.

My code is:

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
});

You can see the legend symbol for Tokyo is a blue circle with a line running through it. I want to override this with my own custom legend.

The Legend API allows you to set properties such as symbol width (symbolWidth), padding (symbolPadding) etc. But seeminlgy there is no way to actually replace the symbol.

There is a property "useHTML" which sounds useful. Any ideas?

EDIT The legend needs to change, but the marker on the graph should not

• javascript
• highcharts

Share Improve this question Follow edited Mar 30, 2016 at 10:40 Mark asked Mar 30, 2016 at 7:33 MarkMark 5,1081717 gold badges6767 silver badges125125 bronze badges 5

• 3 You can draw it by yourself, please see: jsfiddle/gh/get/jquery/1.7.2/highcharts/highcharts/tree/… – Ivan Commented Mar 30, 2016 at 7:41
• You can specify a marker symbol for your serie as well: jsfiddle/5ebnu4bu/1 But as you will see, it's also displayed on the line – Pimmol Commented Mar 30, 2016 at 8:15
• @Pimskie yes i know that, problem is marker on the chart and in legend wont be the same – Mark Commented Mar 30, 2016 at 8:18
• @Ivan This looks like only way to do it arlight, even if a bit messy – Mark Commented Mar 30, 2016 at 8:18
• 2 may I ask why you need a legend symbol which does not match the series symbol? Just curious, because the whole point of a legend is to explain which is series is what, like keys for a map (not java map, but an actual map). – Rahul Sharma Commented Mar 30, 2016 at 9:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can use two series, connect them using linkedTo option, then for the main series, you can use image as symbol, for example:

$('#container').highcharts({
  series: [{
    data: [],
    id: 'main',
    marker: {
      symbol: 'url(https://www.highcharts./samples/graphics/sun.png)'
    }
  }, {
    linkedTo: 'main',
    data: [1, 3, -2, -4]
  }]
});

Demo: http://jsfiddle/hnc27nf2/

Screenshot:

本文标签： javascriptCustom Highcharts legend symbolStack Overflow