CODEWITHSUNDEEP
highcharts
Mr. Benbenbenbenben
Mr. Benbenbenbenben

Reputation: 123

Adding custom shape on a selected highchart markers

I am trying to create a chart somehow similar to expertoptions' by using Highcharts, however I can't find solution to adding a custom marker to the line, I have tried doing something like:

var myCircle = myChart.renderer.circle(x,y,20).attr({
    fill: '#d3d7de'
  }).add(circlePointGroup);

  var circlePointGroup = myChart.xAxis[0].renderer.g().attr({
    translateX: 2000,
    translateY: 2000
  }).add();

but ended up being a floating static shape, I have here the fiddle, Any help would be appreciated. I have hard time reading their documentation :/

Upvotes: 0

Views: 632

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I think that a better approach might be adding this point as a scatter series - that keeps the point in the move while adding new points to the main series. Using renderer.circle renders circle in a static position.

Demo: https://jsfiddle.net/BlackLabel/Lpfj4stx/

var betWindowInterval = setInterval(function() {
  myChart.xAxis[0].removePlotLine('markerLineX');
  myChart.yAxis[0].removePlotLine('markerLineY');
        myChart.series.forEach(s => {
            if (s.options.id === 'customPoint') {
                s.remove();
            }
        })
  clearInterval(betWindowInterval)
}, 2000);

myChart.addSeries({
    type: 'scatter',
    data: [{x: lastPointY.x, y: lastPointY.y}],
    id: 'customPoint',
    marker: {
        fillColor: 'red',
        radius: 5,
        symbol: 'circle'
    }
})

API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

Upvotes: 1

Related Questions