## Sparkline  
Simplified area chart to show trends  
Category: Charts  

### Introduction

Sparkline is a simplified version of AreaChart. It can be used to display a single series of data in a small space.

### Trend Colors

Use `trendColors` prop instead of `color` to change chart color depending on the trend. The prop accepts an object with `positive`, `negative` and `neutral` properties:

- `positive` - color for positive trend (first value is less than the last value in data array)
- `negative` - color for negative trend (first value is greater than the last value in data array)
- `neutral` - color for neutral trend (first and last values are equal)

`neutral` is optional, if not provided, the color will be the same as `positive`.


```python
import dash_mantine_components as dmc
from dash import html

positive_trend = [10, 20, 40, 20, 40, 10, 50]
negative_trend = [50, 40, 20, 40, 20, 40, 10]
neutral_trend = [10, 20, 40, 20, 40, 10, 50, 5, 10]


def make_sparkline(trend):
    return dmc.Sparkline(
        w=200,
        h=60,
        data=trend,
        trendColors={"positive": "teal.6", "negative": "red.6", "neutral": "gray.5"},
        fillOpacity=0.2,
    )


component = dmc.Stack(
    [
        dmc.Text("Positive Trend"),
        make_sparkline(positive_trend),
        dmc.Text("Negative Trend", mt="md"),
        make_sparkline(negative_trend),
        dmc.Text("Neutral Trend", mt="md"),
        make_sparkline(neutral_trend),
    ],
    gap="md",
)
```
### Change area 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 area color that is dark orange in light mode and lime in dark mode:


```python
import dash_mantine_components as dmc

component = dmc.Sparkline(w=200, h=60, data=[10, 20, 40, 20, 40, 10, 50], className="chart-color")
```

```css
:root {
   --chart-color: var(--mantine-color-orange-8)
}

:root[data-mantine-color-scheme="dark"] {
  --chart-color: var(--mantine-color-lime-4);
}
```


### Sparkline animation
By default, the Recharts data animation is disabled. To enable and customize the animation, use `areaProps` to pass properties to the Recharts `Area` component.


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

component = dmc.Box(
    [
        dmc.Button("Update Chart", id="btn-spark-animation", n_clicks=0),
        dmc.Sparkline(
            w=200,
            h=60,
            data=[],
            areaProps={"isAnimationActive": True},
            color="blue",
            id="spark-animation",
        ),
    ]
)


@callback(Output("spark-animation", "data"), Input("btn-spark-animation", "n_clicks"))
def update(n):
    if n % 2 == 0:
        return [10, 20, 40, 20, 40, 10, 50]
    return [50, 10, 30, 10, 40, 50, 10]
```
### 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.


#### Sparkline selectors

| Selector    | Static selector         | Description                             |
|:------------|:------------------------|:----------------------------------------|
| root        | .mantine-Sparkline-root | Root element                            |


#### Sparkline CSS variables

| Selector         | Variable             | Description                        |
|:-----------------|:---------------------|:-----------------------------------|
| root             | --chart-color        | Controls stroke and fill colors    |


### Keyword Arguments
#### Sparkline

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- areaProps (dict; optional):
    Props passed down to recharts `Area` component.

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

- color (optional):
    Key of `theme.colors` or any valid CSS color, `theme.primaryColor`
    by default.

- connectNulls (boolean; optional):
    Determines whether points with `None` values should be connected,
    `True` by default.

- curveType (a value equal to: 'bump', 'linear', 'natural', 'monotone', 'step', 'stepBefore', 'stepAfter'; optional):
    Type of the curve, `'linear'` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data (list of numbers; required):
    Data used to render the chart.

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

- fillOpacity (number; optional):
    Controls fill opacity of the area, `0.6` by default.

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

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

- strokeWidth (number; optional):
    Area stroke width, `2` by default.

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

- trendColors (dict; optional):
    If set, `color` prop is ignored and chart color is determined by
    the difference between first and last value.

    `trendColors` is a dict with keys:

- variant (string; optional):
    variant.

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

- withGradient (boolean; optional):
    Determines whether the chart fill should be a gradient, `True` by
    default.