# 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="" %} **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="" %} #### 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="" %} #### 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="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-v3.toucantoco.com/visualizations-and-layouts/creating-visualizations/advanced-chart-configuration/add-sparklines.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.