BubbleChart color prop accepts theme colors and CSS values
The BubbleChart color property accepts colors from the theme object using names like 'blue', 'red.5', 'orange.7', or any valid CSS color value.
charts/bubble-chart
8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
BubbleChart color changes with color scheme using CSS variables
You can use CSS variables in the BubbleChart color property to change colors depending on the color scheme. Define CSS variables using light/dark mixins or the light-dark function from the PostCSS preset.
BubbleChart withTooltip prop disables tooltip and interactions
Setting withTooltip={false} removes the tooltip from the BubbleChart, which also removes the cursor line and disables all interactions with the chart.
BubbleChart valueFormat prop formats tooltip values
Use the valueFormat prop on BubbleChart to format values in the tooltip. It accepts a function that takes a number value as an argument and returns a formatted value.
BubbleChart grid and text colors with CSS variables
Use the CSS variables --chart-grid-color and --chart-text-color to change the colors of grid lines and text within the BubbleChart. With CSS modules, you can change colors depending on color scheme.
BubbleChart gridColor and textColor props as alternatives to CSS variables
For applications with only one color scheme, use the gridColor and textColor props on BubbleChart instead of CSS variables to change grid and text colors.
BubbleChart props example with gridColor and textColor
Example of BubbleChart usage: <BubbleChart gridColor="gray.5" textColor="gray.9" h={60} data={data} range={[16, 225]} label="Sales/hour" color="lime.6" dataKey={{ x: 'hour', y: 'index', z: 'value' }} />
BubbleChart dataKey structure for x, y, and z axes
The BubbleChart dataKey prop is an object with x, y, and z properties that map to data keys. For example: dataKey={{ x: 'hour', y: 'index', z: 'value' }} maps the hour, index, and value fields from the data.