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:
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.
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.