## BubbleChart Bubble Chart component Category: Charts ### Usage ```python import dash_mantine_components as dmc from .data import data component = dmc.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"} ) ``` ### Data Here is the data used in all the examples on this page: ```python data = [ {"hour": "08:00", "index": 1, "value": 150}, {"hour": "10:00", "index": 1, "value": 166}, {"hour": "12:00", "index": 1, "value": 170}, {"hour": "14:00", "index": 1, "value": 150}, {"hour": "16:00", "index": 1, "value": 200}, {"hour": "18:00", "index": 1, "value": 400}, {"hour": "20:00", "index": 1, "value": 100}, {"hour": "22:00", "index": 1, "value": 160}, ] ``` ### Change color 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. ### Change line color depending on color scheme You can use CSS variables in color property. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode) Example of line color that is dark orange in light mode and lime in dark mode: ```python import dash_mantine_components as dmc from .data import data component = dmc.BubbleChart( h=60, data=data, range=[16, 225], label="Sales/hour", color="var(--chart-color)", dataKey={"x": "hour", "y": "index", "z": "value"} ) ``` ```css :root { --chart-color: var(--mantine-color-orange-8) } :root[data-mantine-color-scheme="dark"] { --chart-color: var(--mantine-color-lime-4); } ``` ### Grid and text colors Use `--chart-grid-color` and `--chart-text-color` to change colors of grid lines and text within the chart. With CSS , you can change colors depending on color scheme. Learn more in the Theming section under [Colors.](/colors#colors-in-light-and-dark-mode) ```python import dash_mantine_components as dmc from .data import data component = dmc.BubbleChart( h=60, data=data, range=[16, 225], label="Sales/hour", className="chart-grid-text-colors", dataKey={"x": "hour", "y": "index", "z": "value"} ) ``` ```css .chart-grid-text-colors { --chart-grid-color: var(--mantine-color-blue-5); --chart-text-color: var(--mantine-color-blue-8); } [data-mantine-color-scheme='dark'] .chart-grid-text-colors { --chart-grid-color: var(--mantine-color-blue-3); --chart-text-color: var(--mantine-color-blue-2); } ``` If your application has only one color scheme, you can use `gridColor` and `textColor` props instead of CSS variables: ```python dmc.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"} ) ``` ### Value formatter To format values in the tooltip and axis ticks, use `valueFormatter` prop. It accepts a function that takes number `value` as an argument and returns formatted value: Note: This example uses custom JavaScript defined in the assets folder. Learn more in the "Functions As Props" section of this document. ```python import dash_mantine_components as dmc from .data import data component = dmc.BubbleChart( h=60, data=data, range=[16, 225], label="Sales/hour", color="lime.6", dataKey={"x": "hour", "y": "index", "z": "value"}, valueFormatter={"function": "formatUsd"}, ) ``` ```javascript var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {}; dmcfuncs.formatUsd = function (value) { return `${value.toFixed(2)} USD`; }; ``` ### Remove tooltip To remove tooltip, set `withTooltip=False`. It also removes the cursor line and disables interactions with the chart. ```python import dash_mantine_components as dmc from .data import data component = dmc.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"}, withTooltip=False ) ``` ### clickData Use the `clickData` property in a callback to retrieve data from the most recent click event. ```python from dash import callback, Input, Output import dash_mantine_components as dmc from .data import data component = dmc.Group( [ dmc.BubbleChart( id="figure-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"} ), dmc.Text(id="clickdata-bubblechart"), ] ) @callback( Output("clickdata-bubblechart", "children"), Input("figure-bubblechart", "clickData"), ) def update(data): return f"clickData: {data}" ``` ### hoverData Use the `hoverData` property in a callback to retrieve data from the most recent hover event. ```python from dash import callback, Input, Output import dash_mantine_components as dmc from .data import data component = dmc.Group( [ dmc.BubbleChart( id="figure-bubblechart-hover", 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"} ), dmc.Text(id="hoverdata-bubblechart"), ] ) @callback( Output("hoverdata-bubblechart", "children"), Input("figure-bubblechart-hover", "hoverData"), ) def update(data): return f"hoverData: {data}" ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### BubbleChart selectors | Selector | Static selector | Description | |----------|------------------------------|----------------------------| | root | .mantine-BubbleChart-root | Root element | | axis | .mantine-BubbleChart-axis | X and Y axis of the chart | | tooltip | .mantine-BubbleChart-tooltip | Tooltip root element | #### BubbleChart CSS variables | Selector | Variable | Description | |----------|-----------------------|---------------------------------------------| | root | --chart-grid-color | Controls color of the grid and cursor lines | | | --chart-text-color | Controls color of the axis labels | ### Keyword Arguments #### BubbleChart - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - clickData (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Click data. - color (optional): Color of the chart items. Key of `theme.colors` or any valid CSS color, `blue.6` by default. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data (list of dicts with strings as keys and values of type boolean | number | string | dict | list; required): Chart data. - data-* (string; optional): Wild card data attributes. - dataKey (dict; required): Data keys for x, y and z axis. `dataKey` is a dict with keys: - gridColor (optional): Color of the grid and cursor lines, by default depends on color scheme. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - hoverData (dict with strings as keys and values of type boolean | number | string | dict | list; optional): Hover data. - label (string; optional): Chart label displayed next to the x axis. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - range (list of 2 elements: [number, number]; required): Z axis range. - scatterProps (dict; optional): Props passed down to the `Scatter` component. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - textColor (optional): Color of the text displayed inside the chart, `'dimmed'` by default. - tooltipProps (dict; optional): Props passed down to the `Tooltip` component. - valueFormatter (boolean | number | string | dict | list; optional): A function to format values on Y axis and inside the tooltip. See https://www.dash-mantine-components.com/functions-as-props. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. - withTooltip (boolean; optional): Determines whether the tooltip should be displayed, `True` by default. - xAxisProps (dict; optional): Props passed down to the `XAxis` recharts component. - yAxisProps (dict; optional): Props passed down to the `YAxis` recharts component. - zAxisProps (dict; optional): Props passed down to the `ZAxis` recharts component.