flutterdartflutter-layoutflutter-charts

Optional stroke on Flutter charts bar chart


I have a charts.BarChart in which I want to highlight one of the bars in the chart by adding a border to the bar.

This is possible to do by following this example: I can use colorFn and fillColorFn to color the border and the interior of the bar respectively. By default, colorFn does nothing at all, but by setting BarRendererConfig.strokeWidthPx to a positive value, colorFn controls the border color.

Now, to color only a single bar, my naive approach was to return charts.MaterialPalette.black in colorFn for the relevant bar, and charts.MaterialPalette.transparent for all other ones. This doesn't quite work since the non-highlighted bars now end up being padded with the value of strokeWidthPx. A better approach is to simply ensure that colorFn and fillColorFn return the same color for the non-highlighted bars. This is better but still not quite perfect: Even though the border has the same color as its interior, it's still possible to see that the border is rendered separately:

enter image description here

This doesn't happen for the default 0 value of strokeWidthPx.

So the question is: Is there a way to indicate to Flutter charts that I don't want the border to be drawn for a given bar?

Suggestions for alternative approaches to highlight a particular bar (using something that's not color) are also welcome.


Solution

  • Indeed there is: the charts.Series constructor has a strokeWidthPxFn paramenter, and returning 0 for the non-highlighted bars does exactly what is desired here.