Fluent UI v9 and @fluentui/react-charting

[mr-github-user]

@micahgodbolt

I'm using Fluent UI react components v9 in a new application.

I want to use the charting library @fluentui/react-charting.

I've starting using multiple charts in my application and noticed that the themes in react-charting are not compatible with the themes in the v9 react components.

I don't want to use another library, and I figure that react-charting has just not been updated to v9 yet.

That being said do you have any recommendations as to how I should incorporate v9 style tokens into the react-charting styles? I know it would probably be a temporary measure. But I really don't want to pull in another library.

Thanks

[AtishayMsft]

Hey @mr-github-user. We have starting onboarding the react-charting library to fluent v9. We are piloting with sparkline and donut chart in this month.
In the meanwhile can you share what issues you are running into while consuming the charts. We might be able to help with some workarounds.

[mr-github-user]

Themeing is my main issue.

I want to support the client's system theme.

In light mode the charts look pretty good, in dark mode the text is not readable and the borders are off.

I've spent several hours trying to set the individual chart component styles with Griffel tokens. However I have not been able to figure out how to override all the styles (borders, legends, xaxis, yaxis).

For the AreaChart, I was able to style the chartName, the LegendText, and the area colors. I was not able to figure out how to style the x/y axis or the lines.

I was wondering if there would be a way to create a color pallete for the charts using the newer v9 style tokens.

Let me know if you need a more specific example.

It's good to hear that react-charting is being brought into fluent v9. Should I just wait?

[AtishayMsft]

@mr-github-user Fluent v9 does not support the charting color palette yet. You can use the latest colors from the charting color palette from https://github.com/microsoft/fluentui/blob/master/packages/react-charting/docs/colors.md.

Charting v8 requires a ThemeProvider to work correctly. The v9 theme tokens are not hooked up in charting library yet.
We would be interested to see how you are using the current v8 charts with fluent v9. Do share your sample code. We can suggest ways to unblock you.

[AtishayMsft]

@mr-github-user Quick update on Fluent v9 support for react-charting.
Right now we are doing a POC to identify the bugs and approach needed to support V9.
You can refer to the below POC and use the ChartWrapper to get the charting controls to render correctly.

AtishayMsft/FluentChartingV9Migration: POC to enable fluent charting controls to function correctly on fluent v9 (github.com)

[15MariamS]

Hi @AtishayMsft,

Similar question - I want to incorporate charts into my app. I'm using fluent v9 for everything else - should I start with react-charting then migrate later? I'm mainly wanting a horizontal bar chart and stacked horizontal bar chart.

Thank you!

[AtishayMsft]

@15MariamS Yes, you can use the react-charting package and follow the migration steps to consume it alongside other fluent v9 controls.
https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-charts-migration--page
As we build richer support for v9, the latest steps to use charts will be posted on the v9 docsite.