Carbon µPlot

CPU utilization — 24h

CPU utilization — single series

CPU utilization — legend top

CPU utilization — no legend

Disk I/O — custom series colors

Memory breakdown — value & tooltip time formatters

CPU utilization — toggle points

CPU utilization — points suppressed


import { createAreaChart } from 'carbon-uplot';

createAreaChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01' },
  { label: 'prod-vsi-02' },
  { label: 'prod-vsi-03' },
];


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<AreaChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ]}
/>


import { createAreaChart } from 'carbon-uplot';

createAreaChart(el, {
  data: [timestamps, cpuSeriesC],
  yRange: [0, 100],
  series: [{ label: 'CPU' }],
});


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
el.data = [timestamps, cpuSeriesC];
el.yRange = [0, 100];
el.series = [{ label: 'CPU' }];


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<AreaChart
  data={[timestamps, cpuSeriesC]}
  yRange={[0, 100]}
  series={[{ label: 'CPU' }]}
/>


import { createAreaChart } from 'carbon-uplot';

createAreaChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ],
  legend: 'top',
});


import 'carbon-uplot/web-components';

// <cu-area-chart legend="top"></cu-area-chart>
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01' },
  { label: 'prod-vsi-02' },
  { label: 'prod-vsi-03' },
];


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<AreaChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ]}
  legend="top"
/>


import { createAreaChart } from 'carbon-uplot';

createAreaChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ],
  legend: false,
});


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01' },
  { label: 'prod-vsi-02' },
  { label: 'prod-vsi-03' },
];
el.legend = false;


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<AreaChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ]}
  legend={false}
/>


import { createAreaChart } from 'carbon-uplot';

createAreaChart(el, {
  data: [timestamps, diskReads, diskWrites, diskAwait],
  yRange: [0, 350],
  series: [
    { label: 'reads/s', color: '#ff7eb6' },
    { label: 'writes/s', color: '#42be65' },
    { label: 'await (ms)', color: '#f1c21b' },
  ],
});


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
el.data = [timestamps, diskReads, diskWrites, diskAwait];
el.yRange = [0, 350];
el.series = [
  { label: 'reads/s', color: '#ff7eb6' },
  { label: 'writes/s', color: '#42be65' },
  { label: 'await (ms)', color: '#f1c21b' },
];


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<AreaChart
  data={[timestamps, diskReads, diskWrites, diskAwait]}
  yRange={[0, 350]}
  series={[
    { label: 'reads/s', color: '#ff7eb6' },
    { label: 'writes/s', color: '#42be65' },
    { label: 'await (ms)', color: '#f1c21b' },
  ]}
/>


import { createAreaChart } from 'carbon-uplot';

function valueFormat(value) {
  return `${(value / 1024).toFixed(1)} GB`;
}

function xFormat(timestamp) {
  return new Date(timestamp * 1000).toLocaleString(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  });
}

createAreaChart(el, {
  data: [timestamps, memUsed, memCached, memBuffers],
  series: [{ label: 'Used' }, { label: 'Cached' }, { label: 'Buffers' }],
  valueFormat,
  xFormat,
});


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
el.data = [timestamps, memUsed, memCached, memBuffers];
el.series = [{ label: 'Used' }, { label: 'Cached' }, { label: 'Buffers' }];
el.valueFormat = valueFormat;
el.xFormat = xFormat;

function valueFormat(value) {
  return `${(value / 1024).toFixed(1)} GB`;
}

function xFormat(timestamp) {
  return new Date(timestamp * 1000).toLocaleString(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  });
}


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

function valueFormat(value) {
  return `${(value / 1024).toFixed(1)} GB`;
}

function xFormat(timestamp) {
  return new Date(timestamp * 1000).toLocaleString(undefined, {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
  });
}

<AreaChart
  data={[timestamps, memUsed, memCached, memBuffers]}
  series={[{ label: 'Used' }, { label: 'Cached' }, { label: 'Buffers' }]}
  valueFormat={valueFormat}
  xFormat={xFormat}
/>


import { createAreaChart } from 'carbon-uplot';

let showPoints = true;
let chart = buildChart(showPoints);

button.addEventListener('click', () => {
  showPoints = !showPoints;
  chart.destroy();
  chart = buildChart(showPoints);
});

function buildChart(show) {
  return createAreaChart(el, {
    data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
    yRange: [0, 100],
    series: [
      { label: 'prod-vsi-01', points: { show } },
      { label: 'prod-vsi-02', points: { show } },
      { label: 'prod-vsi-03', points: { show } },
    ],
  });
}


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
let showPoints = true;
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = buildSeries(showPoints);

button.addEventListener('click', () => {
  showPoints = !showPoints;
  el.series = buildSeries(showPoints);
});

function buildSeries(show) {
  return [
    { label: 'prod-vsi-01', points: { show } },
    { label: 'prod-vsi-02', points: { show } },
    { label: 'prod-vsi-03', points: { show } },
  ];
}


import { useState, useMemo } from 'react';
import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

function TogglePoints() {
  const [showPoints, setShowPoints] = useState(true);
  const series = useMemo(
    () => [
      { label: 'prod-vsi-01', points: { show: showPoints } },
      { label: 'prod-vsi-02', points: { show: showPoints } },
      { label: 'prod-vsi-03', points: { show: showPoints } },
    ],
    [showPoints],
  );

  return (
    <>
      <button onClick={() => setShowPoints((p) => !p)}>Toggle points</button>
      <AreaChart
        data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
        yRange={[0, 100]}
        series={series}
      />
    </>
  );
}


import { createAreaChart } from 'carbon-uplot';

createAreaChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01', points: { show: false } },
    { label: 'prod-vsi-02', points: { show: false } },
    { label: 'prod-vsi-03', points: { show: false } },
  ],
});


import 'carbon-uplot/web-components';

// <cu-area-chart></cu-area-chart>
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01', points: { show: false } },
  { label: 'prod-vsi-02', points: { show: false } },
  { label: 'prod-vsi-03', points: { show: false } },
];


import { AreaChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<AreaChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01', points: { show: false } },
    { label: 'prod-vsi-02', points: { show: false } },
    { label: 'prod-vsi-03', points: { show: false } },
  ]}
/>