Bubble chart component
You can reference colors from theme the same way as in other components, for example, blue , red.5 , orange.7 , etc. Any valid CSS color value is also accepted.
You can use CSS variables in the color property. To define a CSS variable that changes depending on the color scheme, use light/dark mixins or the light-dark function . Example of an area that is dark orange in light mode and lime in dark mode:
To remove the tooltip, set withTooltip={false} . This also removes the cursor line and disables interactions with the chart.
To format values in the tooltip, use the valueFormat prop. It accepts a function that takes a number value as an argument and returns a formatted value:
Use --chart-grid-color and --chart-text-color to change colors of grid lines and text within the chart. With CSS modules , you can change colors depending on color scheme:
If your application has only one color scheme, you can use the gridColor and textColor props instead of CSS variables: