---
url: /card-guides/making-a-line-bar-area-chart.md
description: In this guide we will walk through the process of creating a line chart.
---

# Making a Line / Bar / Area Chart

In this guide we will walk through the process of creating a line chart. In our example, we will build a line chart that displays actual revenue over time for different locations.

### Simple Instructions

Required properties:

* **Plot Instructions:** Set instructions that represent the x-axis of the chart.

* **Plot X Label:** Labels along the X-axis.

* **Series Instructions:** Set instructions that represent the contents of the chart.

* **Series Format:** Determines what kind of chart the chart component is. In this example, we are selecting between Line, Rectangle and Area.

* **Series Title:** Determines the legend labels and typically links to the  dimension used in the Series Instructions.

* **Series Y Value:**: Link to cube data to be shown on the chart.

### Detailed Walkthrough

1. To begin, drag a chart component into the card editor panel.

   In charts, there are five required properties to be edited in order for the chart to render:

   * Plot Instructions
   * Plot X Label
   * Series Instructions
   * Series Title
   * Series Y Value

2. Click on the chart icon in the card editor to open the chart properties panel.

3. Under the **Plots** section, open the **Plot Instructions** property by clicking on the set editor icon.

4. Click on the "Add Item" button on the bottom left to add a row for instructions. Click on the blue plus button in the new row to add a dimension. Choose from the dropdown, and click "Select" to confirm the selection.

5. Click on the pencil icon next to the dimension name to add dimension instructions.

   The elements selected here will define what shows on the x-axis of the chart. In this example, we are going to show values over a period of time and utilise the descendants of 2023 in the "Time" dimension.

   :::tip
   Choose elements from the left panel of the Popup. They can be added to set instructions by double-clicking on individual elements, or right clicking on an element for a dropdown menu of more methods to quickly add elements.
   :::

6. Under the **Plots** section, open the **Plot X Label** property by clicking on the formula editor icon. This property defines the horizontal label along the bottom of the chart. To pair it with the dimension chosen in the **Plot Instructions**, enter the `ELEMENT()` value. In this example, it will be `ELEMENT("Time")`.

7. Under the **Series** section, open the **Series Instructions** property by clicking on the set editor icon. Follow steps 4-5.

   The elements selected here will define the content of the chart. In this example,

8. Under the **Series** section, open the **Series Instructions** property by clicking on the set editor icon. Follow steps 4-5. In this example we are going to select the "Location" dimension so that the chart compares locations over time.

9. Under the **Series** section, open the **Series Title** property by clicking on the formula editor icon. This property defines the chart’s visual contents and colour-coded legend. To pair it with the dimension chosen in the **Series Instructions**, enter the `ELEMENT()` value. In this example, it will be `ELEMENT("Location")`.

10. Under the **Series** section, open the **Series Y Value** property by clicking on the formula editor icon. This property typically is linked to a cube to utilize the card's context and data within the chart, and supplies the actual numbers the chart will be pointing to.

11. This stage is where the chart type is selected. Under the **Series** section, open the **Series Format** property.
    * For a **Bar Chart** select **Rectangle**. This is the default value.
    * For a **Line Chart** select **Line**
    * For an **Area Chart** select **Area**

12. With all of the above values filled out, when hitting preview the chart will now appear.

13. To ensure the correct numbers for what is intended to show are being shown, double check that the context of the card is using the correct locations. Since in this guide only two dimensions are given context in the chart (In our example, Time and Location), the rest would fall back on context.

    To ensure our exmaple is showing what we want (actual revenue), we must ensure the `Scenario` in the context panel is set to `Actual` and the Measures are set to `Revenue`.

#### Useful additional properties:

* Chart Title

* Chart Subtitle

* Data Labels:

  Change to `Yes` to show amount labels for bars

* Data Label Color

* Plot Color Formula:

  Two easy ways to color a pie chart are by splitting a list of colors based on the plot index or a cascading if statement. More segments will require more colors listed in the split or multiple cascading IF functions to match the segment count

  **Example**:

  `SPLIT("#FF4054,#323652",",",NUMBER(VARIABLE("plot-index")))`

  or

  `IF( ELEMENT("Sales Measures") = "Revenue", "#FF4054", "#323652")`

:::tip Cropping the plotted range
The range of data plotted can be cropped by returning `CONTINUE` from the **Series Y Value** property. `CONTINUE` tells the chart to skip that point rather than plot a zero, which is what lets one series stop where another starts.

This example plots Actuals up to and including `2026 - Apr`, and Forecast from that point on:

```js
IF(
    OR(
        AND(
            ELEMENT("Scenario") = "Actual"
            ,
            POSITION("Time", "Month List", ELEMENT("Time")) > POSITION("Time", "Month List", "2026 - Apr")
        )
        ,
        AND(
            ELEMENT("Scenario") = "Forecast"
            ,
            POSITION("Time", "Month List", ELEMENT("Time")) < POSITION("Time", "Month List", "2026 - Apr")
        )
    )
    ,
    CONTINUE
    ,
    LINK("Profit and Loss", ["Amount"])
)
```

Each branch drops the points that belong to the other scenario: an Actual after the cutover, or a Forecast before it, returns `CONTINUE` and isn't plotted.
:::