The MetricChartLine widget is used to display a line chart based on plan properties. It allows you to visualize metrics over time with customizable appearance and behavior.
The widget supports multiple metrics, each with its own line style, color, and legend. You can adjust the chart’s grid, axes, background, and other visual elements to fit your design requirements.
Example Usage:
<ui-metric-chart-line
:limit="6"
:charts="[
{metric: 'm.Frontline', color: 'blue', lineWidth: 2, fill: false},
{metric: 'm.Downline', color: 'red', lineWidth: 2, fill: true, title: 'QWA'}
]"
legend-position="top"
:grid-width="0"
axis-color="#EEEEEE"
ticks-color="#BBBBBB"
:axis-width="4"
background-class="elevation-2"
:show-current-period="false"
:limit="100"
:hide-header="true"
title="Network"
force-height="190px"
></ui-metric-chart-line>| Property | Default | Type | Description |
| metric | m.Frontline | String | The property to be displayed in the widget |
| title | Network | String | Chart title |
| color | blue | String | Line color |
| :line-width | 2 | Number | Line width |
| :point-radius | — | Number | Point radius on the chart |
| axis-color | #EEEEEE | String | Axis color |
| :axis-width | 4 | Number | Axis width |
| ticks-color | #BBBBBB | String | Color of numbers on the scales |
| :grid-width | 0 | Number | Grid width |
| background-class | elevation-2 | String | Background color class |
| :fill | false | Boolean | Whether to fill under the chart line |
| :show-current-period | false | Boolean | Whether to show the current period |
| :limit | 100 | Number | Number of periods to display |
| hide-header | true | Boolean | Hide the header with titles and chips |
| legend-position | top | String | Legend position ('top', 'bottom', 'left', 'right', 'none') |
Note: All of the settings can be customized either from admin panel by manually editing code or from within the back office by pressing on a cog icon in a left upper corner of the page (only accessible when "Online office admin" flag is presented).