Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

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

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

CSS

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

JavaScript

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.cross = function (x, y, w, h) {
    return ['M', x, y, 'L', x + w, y + h, 'M', x + w, y, 'L', x, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}


Highcharts.chart('container', {

    title: {
        text: 'Demo of predefined, image and custom marker symbols'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    series: [{
        name: 'triangle symbol',
        data: [29.9, 71.5, 106.4, 129.2],
        marker: {
            symbol: 'triangle'
        }
    },   {
        name: 'Cross symbol',
        data: [54.4, 29.9, {y:71.5, marker:{            symbol: 'circle',
            lineColor: null,
            lineWidth: 2
}}, 106.4],
        marker: {
            symbol: 'cross',
            fillColor:"#AAAAAA",
            lineColor: null,
            lineWidth: 2
        }
    }],

    credits: {
        enabled: false
    },

    subtitle: {
        text: '*) Base64 not supported in IE6 and IE7',
        verticalAlign: 'bottom',
        align: 'right',
        style: {
            fontSize: '10px'
        }
    }
});