Carbon µPlot — Scatter

CPU vs response time — single series

CPU vs response time — axis labels

CPU vs response time — multi-series

CPU vs response time — custom colors, legend top


import { createScatterChart } from 'carbon-uplot';

createScatterChart(el, {
  data: [scatterCpu, scatterLatency],
  series: [{ label: 'prod-vsi-01' }],
});


import 'carbon-uplot/web-components';

// <cu-scatter-chart></cu-scatter-chart>
el.data = [scatterCpu, scatterLatency];
el.series = [{ label: 'prod-vsi-01' }];


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

<ScatterChart
  data={[scatterCpu, scatterLatency]}
  series={[{ label: 'prod-vsi-01' }]}
/>


import { createScatterChart } from 'carbon-uplot';

createScatterChart(el, {
  data: [scatterCpu, scatterLatency],
  series: [{ label: 'prod-vsi-01' }],
  xLabel: 'CPU utilization (%)',
  yLabel: 'Response time (ms)',
});


import 'carbon-uplot/web-components';

// <cu-scatter-chart x-label="CPU utilization (%)" y-label="Response time (ms)"></cu-scatter-chart>
el.data = [scatterCpu, scatterLatency];
el.series = [{ label: 'prod-vsi-01' }];


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

<ScatterChart
  data={[scatterCpu, scatterLatency]}
  series={[{ label: 'prod-vsi-01' }]}
  xLabel="CPU utilization (%)"
  yLabel="Response time (ms)"
/>


import { createScatterChart } from 'carbon-uplot';

createScatterChart(el, {
  data: [scatterCpu, scatterLatency, scatterLatencyB, scatterLatencyC],
  series: [
    { label: 'web tier' },
    { label: 'app tier' },
    { label: 'db tier' },
  ],
  xLabel: 'CPU utilization (%)',
  yLabel: 'Response time (ms)',
});


import 'carbon-uplot/web-components';

// <cu-scatter-chart x-label="CPU utilization (%)" y-label="Response time (ms)"></cu-scatter-chart>
el.data = [scatterCpu, scatterLatency, scatterLatencyB, scatterLatencyC];
el.series = [
  { label: 'web tier' },
  { label: 'app tier' },
  { label: 'db tier' },
];


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

<ScatterChart
  data={[scatterCpu, scatterLatency, scatterLatencyB, scatterLatencyC]}
  series={[
    { label: 'web tier' },
    { label: 'app tier' },
    { label: 'db tier' },
  ]}
  xLabel="CPU utilization (%)"
  yLabel="Response time (ms)"
/>


import { createScatterChart } from 'carbon-uplot';

createScatterChart(el, {
  data: [scatterCpu, scatterLatency, scatterLatencyB, scatterLatencyC],
  series: [
    { label: 'web tier', color: '#4589ff' },
    { label: 'app tier', color: '#ff7eb6' },
    { label: 'db tier', color: '#42be65' },
  ],
  xLabel: 'CPU utilization (%)',
  yLabel: 'Response time (ms)',
  legend: 'top',
});


import 'carbon-uplot/web-components';

// <cu-scatter-chart legend="top" x-label="CPU utilization (%)" y-label="Response time (ms)"></cu-scatter-chart>
el.data = [scatterCpu, scatterLatency, scatterLatencyB, scatterLatencyC];
el.series = [
  { label: 'web tier', color: '#4589ff' },
  { label: 'app tier', color: '#ff7eb6' },
  { label: 'db tier', color: '#42be65' },
];


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

<ScatterChart
  data={[scatterCpu, scatterLatency, scatterLatencyB, scatterLatencyC]}
  series={[
    { label: 'web tier', color: '#4589ff' },
    { label: 'app tier', color: '#ff7eb6' },
    { label: 'db tier', color: '#42be65' },
  ]}
  xLabel="CPU utilization (%)"
  yLabel="Response time (ms)"
  legend="top"
/>