extjssencha-touchsencha-touch-2sencha-touch-2.1

Render data points in a Sencha Chart in a specific color


I want to render some of the datapoint in my charts in a different color than the other, depending on the values in my store. The problem I'm experiencing is that not only the marker is rendered in a different color but also the line to the marker as you can see in this fiddle: https://fiddle.sencha.com/#fiddle/lmu

Is there a way to only change the color of the actual datapoint?

Thanks in advance!


Solution

  • Change your renderer function to this -

    renderer: function (sprite, config, rendererData, index) {
                         var items = rendererData.store.getData().items;
                         if (items[index].data.hidden && config.type ==='marker') { // also check for config.type (data point will return marker as type and the lines will return line)
                         return { strokeStyle: 'yellow', lineWidth: 5 }; // added a lineWidth so that you can see the different color easily
                     }
                    }