You can hook to a function responsible for drawing points - and before it is called, update points according to a symbol callback defined in the options.
Wrapping drawPoints
method:
const H = Highcharts;
H.wrap(H.Series.prototype, 'drawPoints', function(p) {
const options = this.options;
const symbolCallback = options.marker && options.marker.symbolCallback;
const points = this.points;
if (symbolCallback && points.length) {
points.forEach(point => {
const symbol = symbolCallback.call(point);
if (symbol) {
point.update({
marker: {
symbol: symbol
}
}, false)
}
})
}
p.call(this);
})
series config:
series: [{
marker: {
symbolCallback: function() {
return this.x > 2 ? this.y > 150 ? 'circle' : 'triangle' : 'square';
}
},
Live example
http://jsfiddle.net/09mqttxn/
var H = Highcharts;
H.wrap(H.Series.prototype, 'drawPoints', function(p) {
const options = this.options;
const symbolCallback = options.marker && options.marker.symbolCallback;
const points = this.points;
if (symbolCallback && points.length) {
points.forEach(point => {
const symbol = symbolCallback.call(point);
if (symbol) {
point.update({
marker: {
symbol: symbol
}
}, false)
}
})
}
p.call(this);
})
H.chart('container', {
series: [{
marker: {
symbolCallback: function() {
return this.x > 2 ? this.y > 150 ? 'circle' : 'triangle' : 'square';
}
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>