## RadarChart  
Radar chart component  
Category: Charts  

### Usage

RadarChart is based on recharts [RadarChart](https://recharts.org/en-US/api/RadarChart) component:

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales": 120},
    {"product": "Oranges", "sales": 98},
    {"product": "Tomatoes", "sales": 86},
    {"product": "Grapes", "sales": 99},
    {"product": "Bananas", "sales": 85},
    {"product": "Lemons", "sales": 65},
]


component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    series=[{"name": "sales", "color": "blue.4", "opacity": 0.2}],
)
```
### Multiple series 

You can display multiple series on the same radar chart:

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales_january": 120, "sales_february": 100},
    {"product": "Oranges", "sales_january": 98, "sales_february": 90},
    {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
    {"product": "Grapes", "sales_january": 99, "sales_february": 80},
    {"product": "Bananas", "sales_january": 85, "sales_february": 120},
    {"product": "Lemons", "sales_january": 65, "sales_february": 150},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
)
```
### 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.

```python
import dash_mantine_components as dmc

data = [
    {"product": "Apples", "sales": 120},
    {"product": "Oranges", "sales": 98},
    {"product": "Tomatoes", "sales": 86},
    {"product": "Grapes", "sales": 99},
    {"product": "Bananas", "sales": 85},
    {"product": "Lemons", "sales": 65},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    series=[{"name": "sales", "color": "green", "strokeColor": "blue"}],
)
```
### Hide/show chart parts


```python
import dash_mantine_components as dmc

data = [
  {"product": "Apples", "sales_january": 120, "sales_february": 100},
  {"product": "Oranges", "sales_january": 98, "sales_february": 90},
  {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
  {"product": "Grapes", "sales_january": 99, "sales_february": 80},
  {"product": "Bananas", "sales_january": 85, "sales_february": 120},
  {"product": "Lemons", "sales_january": 65, "sales_february": 150}
]

component = dmc.RadarChart(
    h=300,
    data=data,    dataKey="product",

    series=[
      {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
      {"name": "sales_february", "color": "cyan.4", "opacity": 0.1}
    ],
    withPolarGrid=True,
    withPolarAngleAxis=False,
    withPolarRadiusAxis=True,
)


```


### Rechart props

To pass props down to the underlying recharts components, use the following props:
- `radarProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component
- `radarChartProps` passed props to [RadarChart](https://recharts.org/en-US/api/RadarChart) component
- `polarGridProps` passed props to [PolarGrid](https://recharts.org/en-US/api/PolarGrid) component
- `polarAngleAxisProps` passed props to [PolarAngleAxis](https://recharts.org/en-US/api/PolarAngleAxis) component
- `polarRadiusAxisProps` passed props to [PolarRadiusAxis](https://recharts.org/en-US/api/PolarRadiusAxis) component

Example of passing props down to PolarRadiusAxis component:

```python
import dash_mantine_components as dmc


data = [
    {"product": "Apples", "sales_january": 120, "sales_february": 100},
    {"product": "Oranges", "sales_january": 98, "sales_february": 90},
    {"product": "Tomatoes", "sales_january": 86, "sales_february": 70},
    {"product": "Grapes", "sales_january": 99, "sales_february": 80},
    {"product": "Bananas", "sales_january": 85, "sales_february": 120},
    {"product": "Lemons", "sales_january": 65, "sales_february": 150},
]

component = dmc.RadarChart(
    h=300,
    data=data,
    dataKey="product",
    withPolarRadiusAxis=True,
    polarRadiusAxisProps={"angle": 30},
    series=[
        {"name": "sales_january", "color": "lime.4", "opacity": 0.1},
        {"name": "sales_february", "color": "cyan.4", "opacity": 0.1},
    ],
)
```
### Radar animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `radarProps` to pass properties to the Recharts `Radar` component.


```python
from random import randint
import dash_mantine_components as dmc
from dash import callback, Input, Output

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-radarchart-animation"),
        dmc.RadarChart(
            id="radarchart-animation",
            h=300,
            data=[{}],
            dataKey="product",
            withPolarRadiusAxis=True,
            radarProps={
                "isAnimationActive": True,
            },
            series=[{"name": "sales", "color": "blue.4", "opacity": 0.2}],
        ),
    ]
)


@callback(
    Output("radarchart-animation", "data"),
    Input("btn-radarchart-animation", "n_clicks"),
)
def update(n):
    return [
        {"product": "Apples", "sales": randint(20, 100)},
        {"product": "Oranges", "sales": randint(20, 100)},
        {"product": "Tomatoes", "sales": randint(20, 100)},
        {"product": "Grapes", "sales": randint(20, 100)},
        {"product": "Bananas", "sales": randint(20, 100)},
        {"product": "Lemons", "sales": randint(20, 100)},
    ]
```
### 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.


#### RadarChart selectors

| Selector    | Static selector               | Description                                      |
|:------------|:------------------------------|:-------------------------------------------------|
| root        | .mantine-RadarChart-root      | Root element                                    |
| container   | .mantine-RadarChart-container | Recharts ResponsiveContainer component          |


#### RadarChart CSS variables

| Selector         | Variable             | Description                                   |
|:-----------------|:---------------------|:----------------------------------------------|
| root             | --chart-grid-color   | Controls color of the chart grid              |
|                  | --chart-text-color   | Controls color of all text elements in the chart|



### Keyword Arguments
#### RadarChart

- children (a list of or a singular dash component, string or number; optional):
    Additional components that are rendered inside recharts
    `RadarChart` component.

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

- 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):
    Data used in the chart.

- data-* (string; optional):
    Wild card data attributes.

- dataKey (string; required):
    Key of the `data` object for axis values.

- gridColor (optional):
    Controls color of the grid lines. By default, color depends on the
    color scheme.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- legendProps (dict; optional):
    Props passed down to recharts Legend component.

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

- polarAngleAxisProps (dict; optional):
    Props passed down to recharts PolarAngleAxis component.

- polarGridProps (dict; optional):
    Props passed down to recharts PolarGrid component.

- polarRadiusAxisProps (dict; optional):
    Props passed down to recharts PolarRadiusAxis component.

- radarChartProps (dict; optional):
    Props passed down to recharts RadarChart component.

- radarProps (boolean | number | string | dict | list; optional):
    Props passed down to recharts Radar component in a dict.

- series (list of dicts; required):
    Determines which data should be consumed from the `data` array.

    `series` is a list of dicts with keys:

- 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):
    Controls color of all text elements. By default, color depends on
    the color scheme.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withLegend (boolean; optional):
    Determines whether chart legend should be displayed, `False` by
    default.

- withPolarAngleAxis (boolean; optional):
    Determines whether PolarAngleAxis component should be displayed,
    `True` by default.

- withPolarGrid (boolean; optional):
    Determines whether PolarGrid component should be displayed, `True`
    by default.

- withPolarRadiusAxis (boolean; optional):
    Determines whether PolarRadiusAxisProps component should be
    displayed, `False` by default.