> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blinkops.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Charts

> Instructions on how to create and use the Chart Widget

## Adding Chart Widgets

<Steps>
  <Step title="Add Widget">
    In the *Edit Mode* tab of the Dashboards Building Interface, click the "add a widget" button.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/AddWidgetButton.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=d9eec9c99fff837bfadeb5e7f6c5c973" width="1726" height="1080" data-path="img/Dashboards/AddWidgetButton.png" />
    </Frame>
  </Step>

  <Step title="Choose a Chart Type">
    Choose the type of chart you want to utilize. You can choose between a Pie, Donut, Bar, Line or Scatter chart.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/ChartType.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=e6e7f64aaf7fc23a7682c2fae183ca50" width="1726" height="1080" data-path="img/Dashboards/ChartType.png" />
    </Frame>
  </Step>

  <Step title="Provide a name">
    In the top left corner, double-click on *Untitled widget* and provide a name for the selected chart widget.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/NameWidget.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=d8622b107d11d29d740658cfcadd6320" width="1726" height="1081" data-path="img/Dashboards/NameWidget.png" />
    </Frame>
  </Step>

  <Step title="Choose Data Source">
    Choose a data source: [Tables](/docs/blink-platform/tables/tables), [Case Management Tables](/docs/case-management/manage-tables) or [Case Management Reportings](/docs/blink-platform/dashboards/building-a-dashboard/source-types/case-management-reporting) and proceed by selecting the specific table column from the data source you would like to use.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/SourceType.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=a12b270a42c0e35e76f37edaed4905ef" width="1728" height="1082" data-path="img/Dashboards/SourceType.png" />
    </Frame>
  </Step>

  <Step title="Optional-Filter Data">
    Under the Filters section, you can use the [condition builder](/docs/workflows/building-workflows/condition-builder#condition-builder) to define one or more conditions that determine which records are included, filtering the underlying data accordingly. You can also create [nested conditions](/docs/blink-platform/condition-builder/condition-builder#the-advanced-condition-builder-and-nested-conditions) to group related conditions together and apply their own `AND` or `OR` logic, enabling more advanced and precise filtering.

    <Frame>
      <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/ChartConditionBuilder.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=70a5b2439d27b090134e113bd7f2abf1" width="3582" height="1996" data-path="img/Dashboards/ChartConditionBuilder.png" />
    </Frame>
  </Step>
</Steps>

## Chart Types and Configuration

<Tabs>
  <Tab title="Pie">
    ### Pie Chart Data Configuration

    <Note>
      **Note**

      The data used to configure the `pie chart` will be taken from a particular table from the [tables feature](/docs/blink-platform/tables/tables) or [case management feature](/docs/case-management/case-management).

      As a reminder, chart elements can expose raw data that may be sensitive, and therefore should not be used if you have concerns with viewers being able to see that information.
    </Note>

    <Steps>
      <Step title="Group By">
        1. **Column**: Choose the table column you want to **group** the `pie chart` by.

           * If the selected column is a time period, you will see the **Bucket by** option, allowing you to categorize the time period. This will be shown as a legend on the right side of the `pie chart`.

                     <Frame>
                       <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/BucketByPie.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=5600a7b06d18cd56701f847f6c459e00" width="1727" height="1083" data-path="img/Dashboards/BucketByPie.png" />
                     </Frame>

           * If the selected column contains user-related data, the 'User Count' option becomes available. This lets you choose how to group and count the data:

             * Distinct Count – Counts each user and group separately. If a record is linked to a specific user, that user’s name (or email) will appear in the legend. For example, in a pie chart, each slice represents an individual user or group
             * Aggregated View– Groups records by user groups instead of individual entities. The legend will only show group names, and the count will include all records linked to the group, including those assigned to individual users in the group.

                     <Accordion title="Use Case Example: User Count">
                       ### Scenario:

                       A team is tracking case management tasks using a pie chart where the **"Assigned To"** column contains user-related data. In this example:

                       There are a total of **5** Tasks

                       * **Talia** is assigned **1 task**
                       * **John** is assigned **1 task**.
                       * **Noah** is assigned **2 tasks**.
                       * **Group-CM Collab** (which includes both John and Noah) is assigned **1 case**.

                       <Frame>
                         <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/UserCountExample.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=477ccd089e60f6163c1383ffe22d98ca" width="3455" height="1900" data-path="img/Dashboards/UserCountExample.png" />
                       </Frame>

                       When visualizing this data, two different counting methods can be used:

                       #### **1. Distinct Count**

                       In this view, each task assigned to the users and group are counted separately:

                       * **Talia** is assigned **1 task**
                       * **John: 1 tasks**
                       * **Noah: 2 tasks**
                       * **Group-CM Collab: 1 task** (only counting tasks assigned directly to the group, without including those tasks assigned to its members).

                       #### **2. Aggregated View**

                       In this view, tasks are counted at the group level, including tasks belonging to individuals within the group:

                       * **Group- CM Collab** appears as one of the groups as a legend item.
                       * **Total tasks counted for Group- CM Collab: 4** (**1 task** assigned to John + **2 tasks** assigned to Noah + **1 task** assigned directly to Group- CM Collab).
                     </Accordion>

        2. **Sort By:** Choose the order you want the data sorted by:

           * Segment name (ascending)
           * Segment name(descending)
           * Segment count(ascending)
           * Segment count(descending)

                   <Frame>
                     <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/SortByPie.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=4d9dcdf37b2550f28a4c050e2026b87c" width="1728" height="1085" data-path="img/Dashboards/SortByPie.png" />
                   </Frame>

        3. **Limit**: Limit the number of bars shown on the chart to hide the lower count values

                   <Frame>
                     <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/GroupByPie.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=e1757d33f3c5c5928ff2eb0de5d4b1ed" width="1732" height="1081" data-path="img/Dashboards/GroupByPie.png" />
                   </Frame>
      </Step>

      <Step title="Values">
        1. If you select **Record Count**:

           * The Chart widget will show the total number of records available in the chosen source table.

           **OR**

        2. If you select **Field Function** (You can only add a **Field Function** if the selected column is a **numeric value**).

           * **Choose a column**: `Time from Status Open to Status`, `Time in Status` or `Time to Assign`
           * **Choose the sum operation that will be used to calculate the selected column values**: `Sum`, `Maximum`, `Minimum`, `Average` or `Median`.

                   <Frame>
                     <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/ValuePie.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=303a2cf81078c197248b6b7dc12e2ad7" width="1728" height="1089" data-path="img/Dashboards/ValuePie.png" />
                   </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Donut">
    ### Donut Chart Data Configuration

    <Note>
      **Note**

      The data used to configure the `Donut Chart` will be taken from a particular table from the [tables feature](/docs/blink-platform/tables/tables) or [case management feature](/docs/case-management/case-management).

      As a reminder, chart elements can expose raw data that may be sensitive, and therefore should not be used if you have concerns with viewers being able to see that information.
    </Note>

    <Steps>
      <Step title="Group By">
        1. **Column**: Choose the table column you want to **group** the `donut chart` by.

           * If the selected column is a time period, you will be provided with the **Bucket by** option, allowing you to group the column according the time period. This will be displayed as a legend on the right side of the `donut chart`.

                     <Frame>
                       <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/GroupByDonut.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=a3c8f279e530b9f7603b6271fc7cdbcc" width="1728" height="1086" data-path="img/Dashboards/GroupByDonut.png" />
                     </Frame>

           * If the selected column contains user-related data (such as "Purchased By" in this example), the "User Count" option becomes available. This lets you choose how to group and count the data:

             * Distinct Count – Counts each user and group separately. If a record is linked to a specific user, that user’s name (or email) will appear in the legend. For example, in a donut chart, each slice represents an individual user or group.
             * Aggregated View – Groups records by user groups instead of individual entities. The legend will only show group names, and the count will include all records linked to the group, including those assigned to specific users within it.

                     <Frame caption="In the following image, the donut chart groups purchases by user groups, with each colored section representing a user group (by name), and its size indicating the total number of purchases made by that group as well as by each user within the group">
                       <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/CountByDonut.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=16d0c33cec510fa13cf607600d6e4836" width="1728" height="1078" data-path="img/Dashboards/CountByDonut.png" />
                     </Frame>

        2. **Sort By:** Choose the order you want the data sorted by:

           * Segment name (ascending)
           * Segment name(descending)
           * Segment count(ascending)
           * Segment count(descending)

                   <Frame>
                     <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/SortByDonut.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=f59448b36beaaed59837b094424dfa28" width="1726" height="1086" data-path="img/Dashboards/SortByDonut.png" />
                   </Frame>

        3. **Limit**: Limit the number of segments shown on the donut chart to hide the lower count values.
      </Step>

      <Step title="Values">
        1. If you select **Record Count**:
           * The Chart widget will show the total number of records available in the chosen source table.

        **OR**

        2. If you select **Field Function** (You can only add a **Field Function** if the selected column is a **numeric value**).
           * **Choose a column**: `Number`
           * **Choose the sum operation that will be used to calculate the selected column values**: `Sum`, `Maximum`, `Minimum`, `Average` or `Median`.

        <Frame>
          <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/FieldFunctionDonut.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=3379abd43727e407ca003d9d0e2c18f8" width="1727" height="1080" data-path="img/Dashboards/FieldFunctionDonut.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Bar">
    ### Bar Chart Data Configuration

    <Note>
      **Note**

      The data used to configure the `Bar Chart` will be taken from a particular table from the [tables feature](/docs/blink-platform/tables/tables) or [case management feature](/docs/case-management/case-management).

      As a reminder, chart elements can expose raw data that may be sensitive, and therefore should not be used if you have concerns with viewers being able to see that information.
    </Note>

    <Steps>
      <Step title="Set the X axis">
        1. **Column**: Choose the table column you want displayed on the **X axis**.

           * If the selected column is a **time period**, you will be provided with the **Bucket by** option, allowing you to group the column according the time period.

           * If the selected column contains user-related data, the User Count option becomes available. This determines how data is grouped on the x-axis in a bar chart:
             * **Distinct Count** – Each bar represents an individual user or group separately. If a record is linked to a specific user, that user’s name (or email) will appear on the x-axis. This allows you to see how many records belong to each user or group independently.
             * **Aggregated View** – Groups records by user groups instead of individual entities. The x-axis will display only group names, and the count will include all records assigned to the group, including those assigned to individual users in the group.

        2. **Sort By:** Choose how you want the data sorted by:
           * X-axis value (ascending)
           * X-axis value(descending)
           * Y-axis value(ascending)
           * Y-axis value(descending)

        3. **Limit**: Limit the number of bars shown on the chart to hide the lower count values

        <Frame>
          <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/BarXAxis.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=23faaeb4a6af3b91f0e6830aff24adea" width="1727" height="1085" data-path="img/Dashboards/BarXAxis.png" />
        </Frame>
      </Step>

      <Step title="Set the Y axis">
        1. If you select **Record Count**:
           * It will display the number of records available on the selected source table on the Chart widget.

        <Frame>
          <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/BarYAxis.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=951a76c21bb749d66da92f2a49e404ab" width="1726" height="1083" data-path="img/Dashboards/BarYAxis.png" />
        </Frame>

        **OR**

        2. If you select **Field Function** (You can only add a **Field Function** if the selected column is a **numeric value**).
           * **Choose a column**: `Time from Status Open to Status`, `Time in Status` or `Time to Assign`
           * **Choose the sum operation that will be used to calculate the selected column values**: `Sum`, `Maximum`, `Minimum`, `Average` or `Median`.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Line">
    ### Line Chart Data Configuration

    <Note>
      **Note**

      The data used to configure the `Line Chart` will be taken from a particular table from the [tables feature](/docs/blink-platform/tables/tables) or [case management feature](/docs/case-management/case-management).

      As a reminder, chart elements can expose raw data that may be sensitive, and therefore should not be used if you have concerns with viewers being able to see that information.
    </Note>

    <Steps>
      <Step title="Set the X axis">
        1. **Column** Choose the table column you want displayed on the **X axis**.

           * If the selected column is a time period, you will be provided with the **Bucket by** option, allowing you to group the column according the time period.

                   <Frame>
                     <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/LineXAxis.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=e0ac4df75cc0c5c7a6960695a9d88410" width="1717" height="1079" data-path="img/Dashboards/LineXAxis.png" />
                   </Frame>

           * If the selected column contains user-related data (such as "Purchased By" in this example), the User Count option becomes available. This determines how data is plotted on the x-axis in a line chart:

             * **Distinct Count** – Each point on the line represents an individual user or group separately. If a record is linked to a specific user, that user’s name (or email) will appear on the `x-axis`.
             * **Aggregated View** – Groups records by user groups instead of individual entities. The `x-axis` will display only group names, and the line will represent the total count of records assigned to each group, including those assigned to individual users in the group.

                     <Frame caption="Line chart showing aggregated purchase counts by user group. The x-axis displays grouped user names (from the Purchased by column), while the y-axis shows the total number of purchases made by each group, including purchases made by users in the group">
                       <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/CountByLine.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=5846b8b8bea44c75ece49d09a44a5f55" width="1728" height="1079" data-path="img/Dashboards/CountByLine.png" />
                     </Frame>

        2. **Sort By:** Choose how you want the data sorted by:
           * X-axis value (ascending)
           * X-axis value(descending)
           * Y-axis value(ascending)
           * Y-axis value(descending)

                     <Frame caption="Line chart showing aggregated purchase counts by user group. The x-axis displays grouped user names (from the Purchased by column), while the y-axis shows the total number of purchases made by each group, including purchases made by users in the group">
                       <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/SortByLineAxis.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=8c3f695ccf2bab3ff67f60c0cb5934d1" width="1727" height="1083" data-path="img/Dashboards/SortByLineAxis.png" />
                     </Frame>

        3. **Limit**: Limit the number of bars shown on the chart to hide the lower count values
      </Step>

      <Step title="Set the Y axis">
        1. If you select **Record Count**:
           * The Chart widget will show the total number of records available in the chosen source table.

        **OR**

        2. If you select **Field Function** (You can only add a **Field Function** if the selected column is a **numeric value**).
           * **Choose a column**: `Number`.
           * **Choose the sum operation that will be used to calculate the selected column values**: `Sum`, `Maximum`, `Minimum`, `Average` or `Median`.

        <Frame>
          <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/LineYAxis.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=23095e7294e571f737b511ae637bc7fe" width="1728" height="1079" data-path="img/Dashboards/LineYAxis.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>

  <Tab title="Scatter">
    ### Scatter Chart Data Configuration

    <Note>
      **Note**

      The data used to configure the `Scatter Chart` will be taken from a particular table from the [tables feature](/docs/blink-platform/tables/tables) or [case management feature](/docs/case-management/case-management).

      As a reminder, chart elements can expose raw data that may be sensitive, and therefore should not be used if you have concerns with viewers being able to see that information.
    </Note>

    <Steps>
      <Step title="Set the X axis">
        1. **Column**: Choose the table column you want displayed on the **X axis**. If the selected column is a time period, you will be provided with the **Bucket by** option, allowing you to group the column according the time period.

                   <Frame>
                     <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/ScatterXAxis.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=143c3922699f4783d9512f36655ef19c" width="1728" height="1086" data-path="img/Dashboards/ScatterXAxis.png" />
                   </Frame>
      </Step>

      <Step title="Set the Y axis">
        1. If you select **Record Count**:
           * The Chart widget will show the total number of records available in the chosen source table.

        **OR**

        2. If you select **Field Function** (You can only add a **Field Function** if the selected column is a **numeric value**).
           * **Choose a column**: `Number`
           * **Choose the sum operation that will be used to calculate the selected column values**: `Sum`, `Maximum`, `Minimum`, `Average` or `Median`.

        <Frame>
          <img src="https://mintcdn.com/blinkops-2/SbkcEaz7WANh9_cC/img/Dashboards/ScatterYAxis.png?fit=max&auto=format&n=SbkcEaz7WANh9_cC&q=85&s=9fb72be493fe00fb475be3dffcd574e3" width="1728" height="1086" data-path="img/Dashboards/ScatterYAxis.png" />
        </Frame>
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Customize Widget Appearance

In the 'Appearance Tab', you can customize the appearance of a [chart widget](/docs/blink-platform/dashboards/building-a-dashboard/widgets/charts) by selecting a color palette and customizing the legend, as well as the X and Y axis labels.

<Note>
  Widgets that display case severity data will use the **default system color palette** by default. However, you can customize the color palette to better suit your preferences.
</Note>

<Frame>
  <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/CustomizeDashboards.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=0e98e52f01fdd62fec2fd141b5b0c936" width="1728" height="1079" data-path="img/Dashboards/CustomizeDashboards.png" />
</Frame>

1. **For the [pie chart](/docs/blink-platform/dashboards/building-a-dashboard/widgets/charts#chart-types-and-configuration) and [donut chart](/docs/blink-platform/dashboards/building-a-dashboard/widgets/charts#chart-types-and-configuration) widgets:**
   * You can position the legend at the top, bottom, left, or right of the chart, or hide it entirely if you don't want it to be displayed.
   * You can also enable a toggle option to display a custom title.

**For Example**

<Frame>
  <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/CustomizeDonutChart.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=a46d95c468fe8d730dc80c98747d6167" width="1728" height="1090" data-path="img/Dashboards/CustomizeDonutChart.png" />
</Frame>

2. **For the [bar chart](/docs/blink-platform/dashboards/building-a-dashboard/widgets/charts#chart-types-and-configuration), [line chart](/docs/blink-platform/dashboards/building-a-dashboard/widgets/charts#chart-types-and-configuration), and [scatter chart](/docs/blink-platform/dashboards/building-a-dashboard/widgets/charts#chart-types-and-configuration) widgets:**
   * To customize the selected chart, choose a single color from the palette by clicking the colored square next to the "Color" label. Then choose a single color to apply to the chart.
   * You can toggle options to display labels for the X and Y axes.

**For Example**

<Frame>
  <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/CustomizeBarGraph.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=2e5842f19537c6ccd10ed9fe1204ab82" width="1728" height="1088" data-path="img/Dashboards/CustomizeBarGraph.png" />
</Frame>

3. Any other changes made in the **Data** tab, will be automatically applied to the widget in real time.

## Deleting a Chart Widget

1. <p>In the left-hand sidebar, click the <Icon icon="square-ellipsis-vertical" iconType="solid" /> icon in the top-right corner and then select the delete button.</p>

2. The Chart Widget will be removed from your Dashboard Building Interface.

<Frame>
  <img src="https://mintcdn.com/blinkops-2/yJ58SW0nEEHwB-YX/img/Dashboards/DeleteChart.png?fit=max&auto=format&n=yJ58SW0nEEHwB-YX&q=85&s=d0cbf7f8e1628d079bb4229cdd4b5d02" width="3536" height="1948" data-path="img/Dashboards/DeleteChart.png" />
</Frame>