LegendSymbol option demo

author(s): Jakub Szumiński

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
    height: 300px;
    min-width: 300px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'area'
    },

    title: {
        text: 'Legend symbol options'
    },

    caption: {
        text: '*) Rectangle appears as a circle because of the default ' +
            '<a href="https://api.highcharts.com/highcharts/legend.symbolRadius">' +
            'legend.symbolRadius</a>.'
    },

    series: [{
        name: 'areaMarker (default)',
        data: [1, 2, 3, 2, 4]
    }, {
        data: [2, 3, 2, 5, 4],
        legendSymbol: 'lineMarker',
        name: 'lineMarker',
        symbol: 'circle'
    }, {
        data: [1, 0, 1, 1, 0],
        legendSymbol: 'rectangle',
        name: 'rectangle *'
    }]
});