CODEWITHSUNDEEP
javascriptdata-visualizationhighcharts
rattek
rattek

Reputation: 1670

Highstock marker specific option ignored

I'm wondering if there is a way to apply dynamic settings to individual marker of an highstock chart? I've searched for half a day and I have the feeling that there is a problem with the API. It seems that there is no ways to adjust marker setting on a specific datum. ex:

$('#container').highcharts('StockChart', {
    chart : {
        events : {
            load : function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    series : [{
        data : (function () {
            var data = [], time = (new Date()).getTime(), i;
            for (i = -999; i <= 0; i += 1) {
                data.push([
                  { x: time + i * 1000,
                    y: Math.round(Math.random() * 100),
                    marker:{
                        fillColor:'red'
                    }
                  }
                ]);
            }
            return data;
        }())
    }]
}

I've fork a basic Highstock demo to illustrate my point. See the jsfiddle that demonstrate the problem: http://jsfiddle.net/9xj0nz72/1/

Maybe I have an error in my fiddle... or may I have to create an issue on Github?

Thanks a lot!!

Upvotes: 0

Views: 137

Answers (1)

Charles Clayton
Charles Clayton

Reputation: 17946

I had to assign the style in the addPoint method, you can't just push to the data array. And you have to use it on the chart = new Highcharts.StockChart() variable.

I'm pretty sure I got what you were hoping for using the following. And to demonstrate I assigned a random color and radius to each new point.

enter image description here

$(function () {

  var chart = new Highcharts.StockChart({
    chart: {
      renderTo: 'container'
    },
    plotOptions: {
      series: {
        marker: {
          enabled: true
        }
      }
    },
    series: [{
      name: 'Random data',
      data: [],
      time: (new Date()).getTime()
    }]
  });

  /* add new random point every 1 second */
  var i = 0;
  setInterval(function () {
    i++;
    chart.series[0].addPoint({
      marker: {
        /* assign a random hex color and radius */
        fillColor: '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
        radius: Math.floor(Math.random() * 10) + 1  
      },
      y: Math.random() * 100,
      x: i * 1000,
    }, true, false);
  }, 1000);

});

Your updated JSFiddle

Upvotes: 1

Related Questions