--- title: "Chart widget" slug: "chart-widget" updated: 2026-04-13T09:31:02Z published: 2026-04-13T09:31:02Z canonical: "docs.calculus.group/chart-widget" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.calculus.group/llms.txt > Use this file to discover all available pages before exploring further. # Chart widget A chart displays measurements within a certain time frame. You can choose between different types of charts: Line Chart, Bar Chart, Area Chart, Spline Chart or Scatter Plot. Also, charts having multiple Y-axes are supported. This way, you can visualize multiple measurements having different units. ![Graph showing energy consumption and outdoor temperature over several days in January.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2026-01-19 17-21-00.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A37Z&se=2026-11-11T14%3A58%3A37Z&sr=c&sp=r&sig=v06x685hAjq8Pp2I4sj%2FGCIzq3gVtQBrLEf%2Bdx5Na74%3D) ## Widget control elements - **Context menu** Lets you select a date range, or download the data in various formats. - **Hovering over a graph** Shows a coaster detailing the measurement for that sensor. - **Timeline zoom** If enabled, lets you drag the markers below the graph, to zoom in on the data. - **Clicking on a legend** When a chart widget has multiple graphs, you can focus on a specific graph by clicking on its name in the legend. Clicking on it a second time, makes the other graphs visible again. To focus on multiple graphs, hold down the CTRL key while clicking. ![](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/chart_graph_selection.gif?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A37Z&se=2026-11-11T14%3A58%3A37Z&sr=c&sp=r&sig=v06x685hAjq8Pp2I4sj%2FGCIzq3gVtQBrLEf%2Bdx5Na74%3D) ## Widget configuration panel In the widget selection panel, click on **Chart**. A new panel will appear where you can configure the widget. > [!TIP] > Chart edit mode > > To make any changes to the widget settings, you first have to click on the **Edit** button, located in the lower-right of the panel. ### Chart data - y-axes ![Dashboard settings for a line chart with advanced y-axis measurement options displayed.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2026-01-19 17-50-32.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A37Z&se=2026-11-11T14%3A58%3A37Z&sr=c&sp=r&sig=v06x685hAjq8Pp2I4sj%2FGCIzq3gVtQBrLEf%2Bdx5Na74%3D) #### Select sensors The first step is to add at least one measurement to the chart. Press the **Add Measurement** button, a panel will appear where you can select the sensors you want to include in the chart. Click **Save** to add them to the first Y-axis. ![Dashboard settings for generator measurements with various sensor options displayed.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2026-01-19 17-57-47.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A37Z&se=2026-11-11T14%3A58%3A37Z&sr=c&sp=r&sig=v06x685hAjq8Pp2I4sj%2FGCIzq3gVtQBrLEf%2Bdx5Na74%3D) #### Y-Axis settings Fill in the fields below: - **Label** A short description for the current axis. - **Chart Type** Choose one of the following types: - **Line Chart**: uses straight lines to visualize values that change over time. - **Bar Chart**: presents categorical data as rectangular bars, with heights proportional to the values. - **Area Chart**: a line graph, where the area below the line is filled with a solid color. - **Spline Chart**: connects the data points with a series of curved lines, rather than straight lines. - **Scatter Plot**: uses cartesian coordinates to display values for typically two variables from a set of data. - **Suffix** A suffix, or unit, for the measurement. - **Color Scheme** Select a color scheme that has at least as many colors as there are measurements in the current axis. ![Dashboard settings for generator measurements including phase currents and regression line options.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2026-01-20 10-01-38.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A37Z&se=2026-11-11T14%3A58%3A37Z&sr=c&sp=r&sig=v06x685hAjq8Pp2I4sj%2FGCIzq3gVtQBrLEf%2Bdx5Na74%3D) #### Advanced Y-axis settings Click on **Advanced Y-Axis Settings** to fold out a section where you can set: - **Y-axis Minimum** The floor, or lowest value visible on the chart. Defaults to **Auto scale**, which automatically adjusts this value to fit the measured data. - **Y-axis Maximum** The ceiling, or highest value visible on the chart. Defaults to **Auto scale**, which automatically adjusts this value to fit the measured data. - **Decimals** How many decimal places the value should be rounded to. Defaults to 2 decimals places. - **Link irregular data line** If enabled, periods of missing data points are displayed as a straight line between to neighbouring data points. - **Show all data points as dots** If enabled, overlays a dot on the graph, for each data point. - **Reversed Y-Axis** If enabled, reverses the scale for the vertical axis, from low-high to high-low. - **Visualize Event Rules** If enabled, a gradient of colors, matching the selected event definition’s threshold values, is superimposed on the chart. An additional section **Event Rules** becomes available, below the **Measurements** section, where you can set: - **Label**: a short description for the event definition. - **Event definition**: select an event definition to use as a source for the threshold values and colors. - **Minimum Level**: choose a minimum event level to be included in the event visualisation. #### Additional Y-axes If you require more than one Y-axis, click on the **Add Axis** button and repeat the previous steps, or click **Next** to go to Chart settings. ### Chart settings ![Dashboard settings for asset tracking, including chart configuration and widget options.](https://cdn.document360.io/94d0a983-5058-4b02-8d06-1228a999a7a1/Images/Documentation/2026-01-22 17-00-25.png?sv=2026-02-06&spr=https&st=2026-11-11T13%3A58%3A37Z&se=2026-11-11T14%3A58%3A37Z&sr=c&sp=r&sig=v06x685hAjq8Pp2I4sj%2FGCIzq3gVtQBrLEf%2Bdx5Na74%3D) Fill in the fields below: - **Title** A title or description for the widget. - **Order** The position on the dashboard. - **Widget width** The width in relation to the screen width. - **Height** The height of the widget in pixels. - **Max Data Points** How many data points the data will be compressed to, in the selected time period. - **Fixed Interval** - **None**: shows all available data points for the selected period, compressed to fit the **Max Data Points** setting. - **Seconds**, **Minutes**, **Hours**, **Days**, **Weeks**: if selected, lets you specify a **Time Value** for the interval. - **Stacking** - **No Stacking**: the default setting. - **Normal**: when hovering over a data point, the tool tip will show the sum of all measurements. - **Percent**: the values are expressed as a percentage. - **Timeline Zoom** If enabled, you will be able to zoom in on your chart's timeline. - **Show Legend** If enabled, displays the sensor labels below the chart. - **Show Subtitle** If enabled, the subtitle is shown. Click **Save** and then **Close** to add the widget to the dashboard.