EXTJS 7 areaChart Dynamic markers or marker customizations

Question

I am working on area charts whit EXTJS 7.3.1 I want to be able to customize the markers color based on the data value.

How can i do that.

Currently, the markers are set for entire chart. like this.enter image description here

I would like change the color on the markers when value is < 75

Please let me know

Answer 1

You need to create a custom renderer function for the series, see here in the documentation.

Something like this:

series: [{
   // your series definition, including marker etc.
   ,renderer: function(sprite, config, rendererData, index) {
      // renderer function must return the changes
      var changes = {};
      // get current record in the chart's store
      var record = rendererData.store.getData().items[index];
      
      // check value only when it is a marker
      if (config.type === 'marker') {
         // replace 'fieldName' with your fieldname
         // and color1 color2 with the desired colors
         changes.fillStyle = record.data.fieldName < 75 ? 
              'color1' : 'color2';
      }
      return changes;
   }
}],