Carbon µPlot

Informational — no thresholds

Custom color

Custom range — no ticks, valueFormat

Thresholds — low healthy, high critical

Error rate — custom range, thresholds

No ticks

Inverted thresholds — high is healthy

Inverted thresholds — low free memory

p99 latency — custom range, thresholds

Live — setValue()


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 42,
  label: 'CPU utilization',
  valueFormat: (value) => `${value}%`,
});


import 'carbon-uplot/web-components';

// <cu-gauge label="CPU utilization"></cu-gauge>
el.value = 42;
el.valueFormat = (value) => `${value}%`;


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={42}
  label="CPU utilization"
  valueFormat={(value) => `${value}%`}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 57,
  ticks: false,
  valueFormat: (value) => `${value}%`,
  color: 'var(--cds-purple-60, #8a3ffc)',
});


import 'carbon-uplot/web-components';

// <cu-gauge color="var(--cds-purple-60, #8a3ffc)"></cu-gauge>
el.ticks = false;
el.value = 57;
el.valueFormat = (value) => `${value}%`;


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={57}
  ticks={false}
  valueFormat={(value) => `${value}%`}
  color="var(--cds-purple-60, #8a3ffc)"
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 1_840,
  min: 0,
  max: 4_096,
  label: 'Disk used',
  ticks: false,
  valueFormat: (value) => `${(value / 1024).toFixed(1)} TB`,
});


import 'carbon-uplot/web-components';

// <cu-gauge label="Disk used"></cu-gauge>
el.ticks = false;
el.value = 1_840;
el.min = 0;
el.max = 4_096;
el.valueFormat = (value) => `${(value / 1024).toFixed(1)} TB`;


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={1_840}
  min={0}
  max={4_096}
  label="Disk used"
  ticks={false}
  valueFormat={(value) => `${(value / 1024).toFixed(1)} TB`}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 78,
  label: 'CPU utilization',
  valueFormat: (value) => `${value}%`,
  thresholds: [
    { value: 60, status: 'warning' },
    { value: 85, status: 'error' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-gauge label="CPU utilization"></cu-gauge>
el.value = 78;
el.valueFormat = (value) => `${value}%`;
el.thresholds = [
  { value: 60, status: 'warning' },
  { value: 85, status: 'error' },
];


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={78}
  label="CPU utilization"
  valueFormat={(value) => `${value}%`}
  thresholds={[
    { value: 60, status: 'warning' },
    { value: 85, status: 'error' },
  ]}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 4.2,
  min: 0,
  max: 10,
  label: 'Error rate',
  valueFormat: (value) => `${value.toFixed(1)}%`,
  thresholds: [
    { value: 2, status: 'warning' },
    { value: 5, status: 'error' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-gauge label="Error rate"></cu-gauge>
el.value = 4.2;
el.min = 0;
el.max = 10;
el.valueFormat = (value) => `${value.toFixed(1)}%`;
el.thresholds = [
  { value: 2, status: 'warning' },
  { value: 5, status: 'error' },
];


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={4.2}
  min={0}
  max={10}
  label="Error rate"
  valueFormat={(value) => `${value.toFixed(1)}%`}
  thresholds={[
    { value: 2, status: 'warning' },
    { value: 5, status: 'error' },
  ]}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 63,
  label: 'CPU utilization',
  valueFormat: (value) => `${value}%`,
  ticks: false,
  thresholds: [
    { value: 60, status: 'warning' },
    { value: 85, status: 'error' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-gauge label="CPU utilization"></cu-gauge>
el.ticks = false;
el.value = 63;
el.valueFormat = (value) => `${value}%`;
el.thresholds = [
  { value: 60, status: 'warning' },
  { value: 85, status: 'error' },
];


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={63}
  label="CPU utilization"
  valueFormat={(value) => `${value}%`}
  ticks={false}
  thresholds={[
    { value: 60, status: 'warning' },
    { value: 85, status: 'error' },
  ]}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 68,
  label: 'Memory free',
  valueFormat: (value) => `${value}%`,
  thresholds: [
    { value: 0, status: 'error' },
    { value: 20, status: 'warning' },
    { value: 50, status: 'success' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-gauge label="Memory free"></cu-gauge>
el.value = 68;
el.valueFormat = (value) => `${value}%`;
el.thresholds = [
  { value: 0, status: 'error' },
  { value: 20, status: 'warning' },
  { value: 50, status: 'success' },
];


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={68}
  label="Memory free"
  valueFormat={(value) => `${value}%`}
  thresholds={[
    { value: 0, status: 'error' },
    { value: 20, status: 'warning' },
    { value: 50, status: 'success' },
  ]}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 11,
  label: 'Memory free',
  valueFormat: (value) => `${value}%`,
  thresholds: [
    { value: 0, status: 'error' },
    { value: 20, status: 'warning' },
    { value: 50, status: 'success' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-gauge label="Memory free"></cu-gauge>
el.value = 11;
el.valueFormat = (value) => `${value}%`;
el.thresholds = [
  { value: 0, status: 'error' },
  { value: 20, status: 'warning' },
  { value: 50, status: 'success' },
];


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={11}
  label="Memory free"
  valueFormat={(value) => `${value}%`}
  thresholds={[
    { value: 0, status: 'error' },
    { value: 20, status: 'warning' },
    { value: 50, status: 'success' },
  ]}
/>


import { createGauge } from 'carbon-uplot';

createGauge(el, {
  value: 480,
  min: 0,
  max: 1000,
  label: 'p99 latency',
  valueFormat: (value) => `${value}ms`,
  thresholds: [
    { value: 300, status: 'warning' },
    { value: 700, status: 'error' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-gauge label="p99 latency"></cu-gauge>
el.value = 480;
el.min = 0;
el.max = 1000;
el.valueFormat = (value) => `${value}ms`;
el.thresholds = [
  { value: 300, status: 'warning' },
  { value: 700, status: 'error' },
];


import { Gauge } from 'carbon-uplot/react';

<Gauge
  value={480}
  min={0}
  max={1000}
  label="p99 latency"
  valueFormat={(value) => `${value}ms`}
  thresholds={[
    { value: 300, status: 'warning' },
    { value: 700, status: 'error' },
  ]}
/>


import { createGauge } from 'carbon-uplot';

const gauge = createGauge(el, {
  value: 45,
  label: 'Memory free (live)',
  valueFormat: (value) => `${value}%`,
  thresholds: [
    { value: 0, status: 'error' },
    { value: 20, status: 'warning' },
    { value: 50, status: 'success' },
  ],
});

let liveValue = 45;
setInterval(() => {
  liveValue = Math.min(100, Math.max(0, liveValue + (Math.random() - 0.48) * 6));
  gauge.setValue({ value: Math.round(liveValue) });
}, 1000);


import 'carbon-uplot/web-components';

// <cu-gauge label="Memory free (live)"></cu-gauge>
el.value = 45;
el.valueFormat = (value) => `${value}%`;
el.thresholds = [
  { value: 0, status: 'error' },
  { value: 20, status: 'warning' },
  { value: 50, status: 'success' },
];

let liveValue = 45;
setInterval(() => {
  liveValue = Math.min(100, Math.max(0, liveValue + (Math.random() - 0.48) * 6));
  el.value = Math.round(liveValue);
}, 1000);


import { Gauge } from 'carbon-uplot/react';
import { useState, useEffect } from 'react';

function LiveGauge() {
  const [value, setValue] = useState(45);

  useEffect(() => {
    let current = 45;
    const id = setInterval(() => {
      current = Math.min(100, Math.max(0, current + (Math.random() - 0.48) * 6));
      setValue(Math.round(current));
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <Gauge
      value={value}
      label="Memory free (live)"
      valueFormat={(v) => `${v}%`}
      thresholds={[
        { value: 0, status: 'error' },
        { value: 20, status: 'warning' },
        { value: 50, status: 'success' },
      ]}
    />
  );
}