# Add sparklines

*Represent the trend of a metric with a small line*

### Overview[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

📖 **Find tutorial** on the sparklines [here](https://docs.toucantoco.com/concepteur/tutorials/charts-common-concept/sparklines.html).

{% hint style="info" %}
Warning

Only available for:

* horizontal barcharts
* leaderboards centered average
* scorecards
* bulletcharts
  {% endhint %}

### Options[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

#### Available in studio[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

| parameters          | label                   | type    | optional | description                                                                                                          | choices |
| ------------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------- | ------- |
| `value`             |                         | string  |          | Column containing the line value                                                                                     |         |
| `date`              |                         | array   |          | Column containing the time dimension                                                                                 |         |
| `dateFormat`        | Date display format     | string  | True     | Optional. Use d3 time format (like ‘%Y’ to display just years)                                                       |         |
| `legend`            |                         | string  | True     | Type in a legend                                                                                                     |         |
| `commonScatter`     | Common scale            | boolean | True     | Use the same scale for all sparklines (y axis)                                                                       |         |
| `showMissingValues` | Show missing values     | boolean | True     | Display missing values as blank/white lines. By default missing values are filtered out to display a continuous line |         |
| `prefix`            |                         | string  | True     | Optional. Add a prefix to value display.                                                                             |         |
| `forceLexicalOrder` | Automatic date ordering | boolean | True     | Set to false to force lexical reordering of ordinal dates                                                            |         |

### Code mode sample[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

```coffeescript
charts: [
  [...]
  sparklines:
    orderDates: true
    value: ""
    date: ""
]
```

## How to :: add sparklines to your charts

## Overview

**Sparklines are used to represent the trend of a metric with a small line.**

{% embed url="<https://drive.google.com/file/d/1u-uvfvvvg2QvWljGBcaGzx_a6jVR9PrM/view>" %}
**Tuto :: Sparklines**
{% endembed %}

{% hint style="warning" %}
This option requires to use the code mode for the step 2. Don’t worry, just follow this tutorial and you’ll have your sparklines setup in no time 🙏
{% endhint %}

{% hint style="info" %}
Follow along this tutorial with the Story **Tuto :: Sparklines** in the **Advanced Stories** of your **Demo App**.
{% endhint %}

## Step 1 : Build you chart

To add sparklines in a story, first you should… build a story.

Sparklines are an option available for the following charts :

* leaderboards *(horizontal barcharts)*
* leaderboards centered average
* scorecards
* bulletcharts

Use the Studio to select your dataset and create one of the chart listed above. Easy ! 🧸

Find [here](https://drive.google.com/drive/folders/1DWd-7QviuRC67nvAmF1kS6G6hZH2IZA1?usp=sharing) the datasets we used to build our leaderboard in our example.

In our example, our leaderboard dataset (`tuto_sparlkines_leaderboard`) looks like this :

| Product   | evolution | value       | pack   |
| --------- | --------- | ----------- | ------ |
| Product 1 | 0.7       | 71.69397184 | group1 |
| Product 2 | 0         | 85.69342131 | group1 |
| Product 3 | 1.8       | 73.15038154 | group2 |
| Product 4 | 2.2       | 29.78448854 | group2 |
| Product 5 | -0.3      | 7.116178841 | group2 |

{% hint style="warning" %}
Warning

This option is only available in code mode for now.
{% endhint %}

To create sparklines, you need to create a relationship between two datasets:

* the one from your chart
* the one from your sparklines

To which bars of the leaderboard my sparklines data go to? We call this parameter `history`.

For example, a historical/sparklines dataset (`tuto_sparlkines`) could look like in our example:

| date   | Product   | value |
| ------ | --------- | ----- |
| 1/1/20 | Product 1 | 77.3  |
| 1/2/20 | Product 1 | 78.5  |
| 1/3/20 | Product 1 | 79.3  |
| 1/1/20 | Product 2 | 87.4  |
| 1/2/20 | Product 2 | 86.2  |
| 1/3/20 | Product 2 | 84.5  |

and remember, our leaderboard dataset (`tuto_sparlkines_leaderboard`) looks like this :

| Product   | evolution | value       | pack   |
| --------- | --------- | ----------- | ------ |
| Product 1 | 0.7       | 71.69397184 | group1 |
| Product 2 | 0         | 85.69342131 | group1 |
| Product 3 | 1.8       | 73.15038154 | group2 |
| Product 4 | 2.2       | 29.78448854 | group2 |
| Product 5 | -0.3      | 7.116178841 | group2 |

#### Switch to code mode[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

From the **Story** level, switch to code mode.

{% embed url="<https://drive.google.com/file/d/12ACNQWQBeaHV-nwAvhQXVE5PEgOFGvPJ/view>" %}

#### Find the dataset parameter[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

In code mode you see the code version of everything you do in the Studio.

You’ll find a `datasets` block of code. This is where we define what data we used to build the leaderboard.

{% embed url="<https://drive.google.com/file/d/12ACNQWQBeaHV-nwAvhQXVE5PEgOFGvPJ/view>" %}

#### Define an historical dataset[¶](https://github.com/ToucanToco/doc-v3/blob/main/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/broken-reference/README.md)

Now we are going to define another dataset that contains your sparklines data and how it’s link to our leaderboard data.

You need to add a `history` block in your dataset configuration.

```coffeescript
datasets:
  my_dataset:
    query: [...]
    pipeline: [...]
    history:
```

In the `data` attribute, you have to specify the `query` needed to retrieve the historical data, what data source contains your sparklines values. In our example, the `domain` is the `tuto_sparklines` dataset.

```coffeescript
datasets:
  my_dataset:
    query: [...]
    pipeline: [...]
    history:
      data:
        query:
          domain: "tuto_sparklines"
```

{% hint style="info" %}
Note

All parameters available for querying a dataset are available there: `postprocess`, `multiple_queries`,… NB: If you want to retrieve an existing dataset to use it as a sparkline, then you need to copy your dataset’s query and paste it on the history >> data >> query block.
{% endhint %}

`joins` specifies a list of columns to match dataset rows with their historical ones. So on which column you can do the match between your 2 datasets.

Both datasets must have the same columns header and same values (case sensitive) for the `joins` to work.

```coffeescript
datasets:
  my_dataset:
    query: [...]
    pipeline: [...]
    history:
      data:
        query:
          domain: "tuto_sparklines"
      joins: [
        "Product"
      ]
```

{% hint style="warning" %}
Important

Filters can be applied to the history dataset. Make sure to add the column filter’s name in the *join* parameter.
{% endhint %}

In our example both datasets `tuto_sparklines` and `tuto_sparklines_leaderboard` have the same `Product` column. This allows the matching of the sparklines data and the leaderboard bars.

{% embed url="<https://drive.google.com/file/d/1nNx60Gluwrhk5V_SZLDIVfnpQE5qsRCw/view>" %}