We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Live update of the shaders and styles

I see it very inconvenient to reload the entire chart to update the shader (gradient) or the color (ChartSegment properties: color, stroke, etc.)

Is there any possibility to be able to update the shaders or segment properties on the fly?

Real case:

This is 24h price change chart. It has to change its color from green to red and vice versa if the current price is more or less than the price from 24h ago.

Right now the only way (at least I didn't manage to find another) to change gradient and borderColor(strokeColor) is to rerender the component. It is not a big issue if I have only one element like this but I have many on the screen (5 - 20 at the time).

Therefore I was trying to find a way to optimize it - like changing the stylish properties only so I don't need to recalculate the whole chart series on every color change.

6 Replies 1 reply marked as answer

VM Vijayakumar Mariappan Syncfusion Team February 2, 2023 02:00 PM UTC


To change the gradient or border color of the chart, it is necessary to rebuild the widget, which is a behavior in Flutter. If you are concerned about the performance when updating the color of a single series, as it will cause rerendering of other charts, we suggest that you wrap the chart widget in another stateful widget. Doing so will prevent the rebuilding of this widget from affecting the others.

On the other hand, we suggest that you look into the RepaintBoundary widget; it may help you in such a case.



Marked as answer

SE Sergey replied to Vijayakumar Mariappan February 3, 2023 09:21 AM UTC

That's sad that syncfusion doesn't have proper support for color and shader updates on the fly - only through the complete widget rebuild. 


YG Yuvaraj Gajaraj Syncfusion Team February 6, 2023 02:21 PM UTC

Hi Sergey,

We are looking for a feasible solution to achieve your requirement. We will update the status in one business day on 7 February 2023. We appreciate your patience until then.



LA Lavanya Anaimuthu Syncfusion Team February 7, 2023 01:26 PM UTC

Hi Sergey,

We have tried to find a solution, but unfortunately there is no feasible workaround for your requirement. Drawing the whole series in a single canvas makes it impossible to use a different canvas for each segment. As a result of the chart's behavior, all segments will need to be re-rendered when updating data points since a single canvas is used for the chart series.


Lavanya A.

SE Sergey replied to Lavanya Anaimuthu April 13, 2023 06:24 AM UTC

You seem to have misunderstood my question, as your response is not relevant to what I was asking.

LA Lavanya Anaimuthu Syncfusion Team April 14, 2023 01:35 PM UTC

Hi Sergey,

As informed earlier, to change the gradient or border color of the chart, it is necessary to rebuild the widget, which is a behavior in Flutter. So, there is no option to change the series color without calling setState.

Please let us know if you need any further assistance on this.


Lavanya A.

Live Chat Icon For mobile
Up arrow icon