Combo Chart

Blend bar and line series to compare magnitude and trend on dual or shared axes.

npm install @plocks/charts

Examples

Properties

Playground

Basics

Combines multiple chart types (e.g., bars and line) for richer comparison.

Loading demo…

import { ComboChart } from '@plocks/charts';

import { LAYERS } from './data';

export function Demo() {
	return (
		<ComboChart
			title="Revenue vs. active users"
			subtitle="First half of FY25"
			h={340}
			layers={LAYERS}
			enableCrosshair
			multiTooltip
			liveTooltip
			xAxis={{
				show: true,
				title: 'Month',
				labelFormatter: (value) => `M${value}`,
			}}
			yAxis={{
				show: true,
				title: 'Revenue (USD thousands)',
				labelFormatter: (value) => `$${value}`,
			}}
			yAxisRight={{
				show: true,
				title: 'Active users (thousands)',
				labelFormatter: (value) => `${value}k`,
			}}
			yDomain={[0, 650]}
			yDomainRight={[80, 200]}
			grid={{ show: true, style: 'dashed' }}
			legend={{ show: true, position: 'bottom' }}
		/>
	);
}

Scan to open this page on your phoneplocks.dev/charts/ComboChart

Related charts

Bar Chart

Line Chart

Combo Chart

Basics

Related charts

Further reading

plocks