Changing one single marker in a series in ExtJS charts

Question

this is what I'm trying to do... I have a chart with a line series with markers in it. In the X axis I have dates and in the Y axis a number. So lets say I have in x dates from yesterday to next week. And each day has a corresponding Y axis value. What I want to do is change the color of the marker that belongs to the actual date. In other words, to make it clearer, I want to change the color of a single marker in a ExtJS line series. I know of markerConfig but that doesn't seem to help since it applies to all markers.

I haven't found anything like this around so I stopped here to see if you guys could help me. Thanks in advance!

Answer 1

I think the easiest way to do this is to highlight a single datapoint in a series.

First, define your highlight style.

Ext.create('Ext.chart.Chart', {
...
series: [{
  type: 'line',
  highlight: {
    size: 10,
    radius: 10,
    fill: 'red'
  },
...
});

Then, select the appropriate datapoint in your series and call the highlightItem() method. Here's an example showing how to use the method.

var series = myChart.series.get(0);
series.highlightItem(series.items[2]);  // highlight the 3rd data point in the series

The result would look something like this.