CODEWITHSUNDEEP
javascripthighcharts
El Dude
El Dude

Reputation: 5618

Highcharts scatter set markers

How can I specify the marker shape per population in a Highchart scatter plot? It seems to me that they are selected randomly or from a list ?

Upvotes: 2

Views: 4032

Answers (1)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

They may be selected randomly by default, but to set them explicitly, try something like this:

series: [{
    name: 'Predefined symbol',
    data: [316.4, 294.1, 195.6, 154.4],
    marker: {
        symbol: 'triangle'
    }
}],

Where the symbol attribute can specify a shape or link to an icon. There are some pretty cool other options such as creating a custom shape with the following code:

// 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;
}

Here's a link to the highcharts documentation on this subject:

http://api.highcharts.com/highcharts#plotOptions.scatter.marker.symbol

Upvotes: 9

Related Questions