Default Gray Amethyst

Radial Gauge

<mo-radial-gauge> | MORadialGauge
Since 2.9 stable

Radial gauges are used to display a single value within a range of values.

<mo-radial-gauge title="Feeder speed rate" subtitle="54.6% a day ago" value="60.3" unit="%"></mo-radial-gauge>

Examples

Thresholds

Use the thresholds attribute to define an object of minimum and maximum alert and warning thresholds that will be shown on the gauge and indicate the status in the bar colors. 

<mo-radial-gauge
  title="Cavity level"
  subtitle="54.6% a day ago"
  value="86.7322"
  showLabels
  decimals="1"
  unit="%"
  id="threshold-example"
></mo-radial-gauge>

<script>
  const chart = document.querySelector('#threshold-example');
  const thresholds = {
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MORadialGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <MORadialGauge
    title="Cavity level"
    subtitle="54.6% a day ago"
    value={86.7}
    unit="%"
    thresholds={thresholds}
  ></MORadialGauge>
);

Minimum and maximum

The thresholds attribute can have both minimum and maximum thresholds set at once.

<mo-radial-gauge
  title="Cavity level"
  subtitle="54.6% a day ago"
  value="86.7"
  unit="%"
  id="min-max-example"
></mo-radial-gauge>

<script>
  const chart = document.querySelector('#min-max-example');
  const thresholds = {
    minAlert: 15,
    minWarning: 30,
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MORadialGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  minAlert: 15,
  minWarning: 30,
  maxWarning: 65,
  maxAlert: 75
};

const App = () => (
  <MORadialGauge
    title="Cavity level"
    subtitle="54.6% a day ago"
    value={86.7}
    thresholds={thresholds}
    unit="%"
  ></MORadialGauge>
);

Showing labels

Adding the showLabels attribute will render the labels for the min, max, and threshold values. 

<mo-radial-gauge
  showLabels
  title="Cavity level"
  subtitle="24.2mm an hour ago"
  value="39.7"
  min="-50"
  max="50"
  unit="mm"
  id="label-example"
></mo-radial-gauge>

<script>
  const chart = document.querySelector('#label-example');
  const thresholds = {
    maxWarning: 20,
    maxAlert: 30
  };
  chart.thresholds = thresholds;
</script>

import { MORadialGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 20,
  maxAlert: 30
};

const App = () => (
  <MORadialGauge
    title="Cavity level"
    subtitle="24.2mm an hour ago"
    value={39.7}
    unit="%"
    thresholds={thresholds}
    showLabels
  ></MORadialGauge>
);

Status gauge

Adding the statusGauge attribute will render the entire gauge in the color of the current status. 

<mo-radial-gauge
  showLabels
  statusGauge
  title="Cavity level"
  subtitle="24.2mm an hour ago"
  value="86.9"
  min="0"
  max="100"
  unit="mm"
  id="status-example"
></mo-radial-gauge>

<script>
  const chart = document.querySelector('#status-example');
  const thresholds = {
    maxWarning: 65,
    maxAlert: 75
  };
  chart.thresholds = thresholds;
</script>

import { MORadialGauge } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  maxWarning: 20,
  maxAlert: 30
};

const App = () => (
  <MORadialGauge
    title="Cavity level"
    subtitle="24.2mm an hour ago"
    value={39.7}
    unit="%"
    thresholds={thresholds}
    showLabels
  ></MORadialGauge>
);

Interactive example

The gauge will automatically update if the value or the thresholds change.

Status gauge 
<mo-switch class="radial-gauge">
  <mo-icon name="ok" slot="suffix"></mo-icon>
  Status gauge
</mo-switch>
<mo-radial-gauge
  title="Interactive Radial gauge example"
  targetValueLabel="Target"
  subtitle="Try changing the controls"
  value="47.9"
  showLabels
  targetValue="75"
  clamp
  unit="%"
  id="all-example"
></mo-radial-gauge>
<mo-divider></mo-divider>

<div class="controls">
  <mo-range label="value" value="47.9" step="0.1"></mo-range>
  <mo-range id="target" label="target" value="75" step="0.1"></mo-range>
  <div class="inputs">
    <mo-input value="0" label="min"></mo-input>
    <mo-input value="100" label="max"></mo-input>
    <mo-input value="%" label="unit"></mo-input>
  </div>
  <div class="inputs">
    <mo-input id="threshold-min-alert" value="15" label="minAlert"></mo-input>
    <mo-input id="threshold-min-warning" value="30" label="minWarning"></mo-input>
    <mo-input id="threshold-max-warning" value="65" label="maxWarning"></mo-input>
    <mo-input id="threshold-max-alert" value="75" label="maxAlert"></mo-input>
  </div>
</div>

<script>
  const chart = document.querySelector('#all-example');
  const range = document.querySelector('mo-range');
  const target = document.querySelector('#target');
  const toggle = document.querySelector('mo-switch');
  const inputs = document.querySelectorAll('mo-input');
  const thresholds = {
    minAlert: 15,
    minWarning: 30,
    maxWarning: 65,
    maxAlert: 75
  };
  inputs.forEach(input => {
    input.addEventListener('mo-input', e => {
      if (!input.id.includes('threshold')) {
        const attribute = input.label;
        chart.setAttribute(attribute, input.value);
        range.setAttribute(attribute, parseFloat(input.value));
        target.setAttribute(attribute, parseFloat(input.value));
      } else {
        const newThresholds = { ...chart.thresholds };
        newThresholds[input.label] = parseFloat(input.value);
        chart.thresholds = newThresholds;
      }
    });
  });
  range.addEventListener('mo-change', () => {
    chart.value = range.value;
  });
  target.addEventListener('mo-change', () => {
    chart.targetValue = target.value;
  });
  toggle.addEventListener('mo-change', () => {
    if (toggle.checked) chart.setAttribute('statusGauge', toggle.checked);
    else chart.removeAttribute('statusGauge');
  });

  const options = {
    animation: false
  };
  chart.options = options;
  chart.thresholds = thresholds;
</script>

<style>
  .controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .controls mo-input::part(input) {
    width: 100%;
  }
  .inputs {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
  }
  mo-switch.radial-gauge {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
</style>

import { MORadialGauge, MODivider, MORange } from '@metsooutotec/modes-web-components/dist/react';

const thresholds = {
  minAlert: 15,
  minWarning: 30,
  maxWarning: 65,
  maxAlert: 75
};

const gauge = useRef(null);

const updateGauge = (e: Event) => {
  gauge.value = event.target.value;
};

const App = () => (
  <>
    <MORange onMoChange={e => updateGauge(e)} min={0} max={100} value={47.9}></MORange>
    <MODivider></MODivider>
    <MORadialGauge
      ref={gauge}
      title="Cavity level"
      subtitle="54.6% a day ago"
      value={86.7}
      unit="%"
      thresholds={thresholds}
    ></MORadialGauge>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/radial-gauge/radial-gauge.js';

To import this component as a React component:

import MORadialGauge from '@metsooutotec/modes-web-components/dist/react/radial-gauge/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/radial-gauge/radial-gauge.js"></script>

Properties

Name Description Reflects Type Default
canvas Query for the canvas element instantiated in the html template. HTMLCanvasElement -
type Type of chart. ChartType 'doughnut'
chart Reference to the chart itself. Chart -
unit Measurement unit associated with the data. string ''
decimals Number of decimal places to show in the value. number | undefined -
horizontal Whether the chart should be in horizontal view. boolean false
showLabels Shows labels for min, max and the thresholds. boolean false
clamp Clamps value to min/max value. boolean false
statusGauge Renders the entire gauge in the current status color. boolean false
title Title to be shown above the chart. string ''
subtitle Subtitle to be shown above the chart, but below title. string ''
undefinedText Text to be shown in place of value if it is undefined. string '–.-'
min The minimum value on the radial gauge axis. number | string 0
max The maximum value on the radial gauge axis. number | string 100
value The current value on the radial gauge axis. number | string 0
targetValue Set this to draw a target indicator on the given value. number | string | undefined undefined
targetValueLabel The label to be shown in front of the target value below the total. string | undefined undefined
thresholds Thresholds for the chart. Threshold | undefined undefined
builtDatasets Store the datasets that were built based on min, max, value and thresholds. ChartDataset[] | undefined undefined
statusColor The current status color. string | undefined undefined
options Additional options for the chart. ChartOptions {}
customPlugins
custom-plugins 		Use this property to add custom plugins to the created chart.js instance Plugin[] []
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

Name Description Arguments
buildDatasets() Builds the datasets for the radial gauge chart based on the component’s properties. -
rebuildDatasets() Rebuilds the datasets for the radial gauge component by calling the buildDatasets method when thresholds are added. -

Learn more about methods.

Parts

Name Description
base The div containing the canvas element.
canvas The canvas element the chart is rendered in.

Learn more about customizing CSS parts.