Carbon µPlot

Value + sparkline

Custom color — memory

Custom color — network

Sparkline only — showValue: false

Value only — sparkline: false

Live — setValue()

Small — size: 'sm'

Large centered — size: 'lg', align + verticalAlign

Center aligned — align: 'center'

Right aligned — align: 'right'


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: cpuSeries.at(-1),
  data: [timestamps, cpuSeries],
  label: 'CPU utilization',
  valueFormat: (value) => `${value.toFixed(0)}%`,
});


import 'carbon-uplot/web-components';

// <cu-stat label="CPU utilization"></cu-stat>
el.data = [timestamps, cpuSeries];
el.valueFormat = (value) => `${value.toFixed(0)}%`;


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

<Stat
  data={[timestamps, cpuSeries]}
  label="CPU utilization"
  valueFormat={(value) => `${value.toFixed(0)}%`}
/>


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: memUsed.at(-1),
  data: [timestamps, memUsed],
  label: 'Memory used',
  color: '#be95ff',
  valueFormat: (value) => `${(value / 1024).toFixed(1)} GB`,
});


import 'carbon-uplot/web-components';

// <cu-stat label="Memory used" color="#be95ff"></cu-stat>
el.data = [timestamps, memUsed];
el.valueFormat = (value) => `${(value / 1024).toFixed(1)} GB`;


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

<Stat
  data={[timestamps, memUsed]}
  label="Memory used"
  color="#be95ff"
  valueFormat={(value) => `${(value / 1024).toFixed(1)} GB`}
/>


import { createStat } from 'carbon-uplot';

function formatNetworkRate(bytes) {
  if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1)} MB/s`;
  return `${(bytes / 1024).toFixed(0)} KB/s`;
}

createStat(el, {
  value: netInbound.at(-1),
  data: [timestamps, netInbound],
  label: 'Network in',
  color: '#42be65',
  valueFormat: formatNetworkRate,
});


import 'carbon-uplot/web-components';

// <cu-stat label="Network in" color="#42be65"></cu-stat>
el.data = [timestamps, netInbound];
el.valueFormat = formatNetworkRate;


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

<Stat
  data={[timestamps, netInbound]}
  label="Network in"
  color="#42be65"
  valueFormat={formatNetworkRate}
/>


import { createStat } from 'carbon-uplot';

createStat(el, {
  data: [timestamps, cpuSeries],
  showValue: false,
  color: '#3ddbd9',
});


import 'carbon-uplot/web-components';

// <cu-stat color="#3ddbd9"></cu-stat>
el.showValue = false;
el.data = [timestamps, cpuSeries];


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

<Stat
  data={[timestamps, cpuSeries]}
  showValue={false}
  color="#3ddbd9"
/>


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: 99.97,
  label: 'Uptime',
  sparkline: false,
  valueFormat: (value) => `${value}%`,
});


import 'carbon-uplot/web-components';

// <cu-stat label="Uptime"></cu-stat>
el.sparkline = false;
el.value = 99.97;
el.valueFormat = (value) => `${value}%`;


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

<Stat
  value={99.97}
  label="Uptime"
  sparkline={false}
  valueFormat={(value) => `${value}%`}
/>


import { createStat } from 'carbon-uplot';

const stat = createStat(el, {
  value: 45,
  data: [timestamps, cpuSeries],
  label: 'CPU utilization (live)',
  color: '#ff832b',
  valueFormat: (value) => `${value.toFixed(0)}%`,
});

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


import 'carbon-uplot/web-components';

// <cu-stat label="CPU utilization (live)" color="#ff832b"></cu-stat>
el.value = 45;
el.data = [timestamps, cpuSeries];
el.valueFormat = (value) => `${value.toFixed(0)}%`;

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


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

function LiveStat() {
  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 (
    <Stat
      value={value}
      data={[timestamps, cpuSeries]}
      label="CPU utilization (live)"
      color="#ff832b"
      valueFormat={(v) => `${v.toFixed(0)}%`}
    />
  );
}


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: cpuSeries.at(-1),
  data: [timestamps, cpuSeries],
  label: 'CPU utilization',
  size: 'sm',
  valueFormat: (value) => `${value.toFixed(0)}%`,
});


import 'carbon-uplot/web-components';

// <cu-stat size="sm" label="CPU utilization"></cu-stat>
el.data = [timestamps, cpuSeries];
el.valueFormat = (value) => `${value.toFixed(0)}%`;


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

<Stat
  data={[timestamps, cpuSeries]}
  label="CPU utilization"
  size="sm"
  valueFormat={(value) => `${value.toFixed(0)}%`}
/>


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: 99.97,
  label: 'Uptime',
  sparkline: false,
  size: 'lg',
  align: 'center',
  verticalAlign: 'center',
  valueFormat: (value) => `${value}%`,
});


import 'carbon-uplot/web-components';

// <cu-stat size="lg" align="center" vertical-align="center" label="Uptime"></cu-stat>
el.sparkline = false;
el.value = 99.97;
el.valueFormat = (value) => `${value}%`;


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

<Stat
  value={99.97}
  label="Uptime"
  sparkline={false}
  size="lg"
  align="center"
  verticalAlign="center"
  valueFormat={(value) => `${value}%`}
/>


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: memUsed.at(-1),
  data: [timestamps, memUsed],
  label: 'Memory used',
  color: '#be95ff',
  align: 'center',
  valueFormat: (value) => `${(value / 1024).toFixed(1)} GB`,
});


import 'carbon-uplot/web-components';

// <cu-stat align="center" label="Memory used" color="#be95ff"></cu-stat>
el.data = [timestamps, memUsed];
el.valueFormat = (value) => `${(value / 1024).toFixed(1)} GB`;


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

<Stat
  data={[timestamps, memUsed]}
  label="Memory used"
  color="#be95ff"
  align="center"
  valueFormat={(value) => `${(value / 1024).toFixed(1)} GB`}
/>


import { createStat } from 'carbon-uplot';

createStat(el, {
  value: netInbound.at(-1),
  data: [timestamps, netInbound],
  label: 'Network in',
  color: '#42be65',
  align: 'right',
  valueFormat: formatNetworkRate,
});


import 'carbon-uplot/web-components';

// <cu-stat align="right" label="Network in" color="#42be65"></cu-stat>
el.data = [timestamps, netInbound];
el.valueFormat = formatNetworkRate;


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

<Stat
  data={[timestamps, netInbound]}
  label="Network in"
  color="#42be65"
  align="right"
  valueFormat={formatNetworkRate}
/>