Charts

Our chart components provide a powerful and flexible way to visualize data in your applications. They are built to be modular, customizable, and easy to integrate.

Import

You can import each chart component individually.

import { LineChart, BarChart, PieChart, HeatmapChart } from 'h2o-library';

Line Chart

Use line charts to display data points over a continuous interval or time span. They are ideal for showing trends and changes in data.

const chartData = [
  { name: "Jan", actual: 4000, forecast: 2400 },
  { name: "Feb", actual: 3000, forecast: 1398 },
  // ... more data
];

const lineDefinitions = [
  { dataKey: "actual", label: "Actual", color: "#4A90E2" },
  { dataKey: "forecast", label: "Forecast", color: "#F5A623" },
];

<LineChart data={chartData} lines={lineDefinitions} xAxisDataKey="name" />

Line Chart Props

Prop	Type	Description
data	any[]	An array of data objects for the chart.
lines	{ dataKey: string, label: string, color: string }[]	Configuration for each line in the chart.
xAxisDataKey	string	The key from the data objects to use for the x-axis labels.

Bar Chart

Bar charts are useful for comparing different categories of data. They can be displayed horizontally or vertically.

Single Bar Chart

Grouped Bar Chart

Stacked Bar Chart

const barChartData = [
  { name: "Bariatrics", value: 35 },
  { name: "Cardiology", value: 78 },
  // ... more data
];

const barDefinitions = [{ dataKey: "value", label: "Count", color: "#4A90E2" }];

<BarChart data={barChartData} bars={barDefinitions} xAxisDataKey="name" layout="vertical" />

Bar Chart Props

Prop	Type	Description
data	any[]	An array of data objects for the chart.
bars	{ dataKey: string, label: string, color: string }[]	Configuration for each bar series.
xAxisDataKey	string	The key from the data objects to use for the x-axis (or y-axis if vertical) labels.
layout	'horizontal' | 'vertical'	The orientation of the bars. Defaults to horizontal.

Pie Chart

Pie charts are best used to show the proportions of different categories that make up a whole.

const pieChartData = [
  { name: "Cardiology", value: 400, color: "#4A90E2" },
  { name: "Dermatology", value: 300, color: "#F5A623" },
  // ... more data
];

<PieChart data={pieChartData} dataKey="value" nameKey="name" />

Pie Chart Props

Prop	Type	Description
data	any[]	An array of data objects. Each object should include a color property.
dataKey	string	The key for the numerical value of each slice.
nameKey	string	The key for the name/label of each slice.

Donut Chart

const pieChartData = [
  { name: "Cardiology", value: 400, color: "#4A90E2" },
  { name: "Dermatology", value: 300, color: "#F5A623" },
  // ... more data
];

<PieChart data={pieChartData} variant="donut" />

Donut Chart Props

Prop	Type	Description
data	any[]	An array of data objects. Each object should include a color property.
dataKey	string	The key for the numerical value of each slice.
nameKey	string	The key for the name/label of each slice.

Heatmap Chart

const heatmapData: HeatmapData = {
  rows: ['Service 1', 'Service 2', 'Service 3', 'Service 4'],
  columns: ['Room 1', 'Room 2', 'Room 3', 'Room 4', 'Room 5', 'Room 6'],
  data: [
    [
      { value: 35, percentage: -10 },
      { value: 567, percentage: 85 },
      { value: 40, percentage: -30 },
      { value: 25, percentage: 15 },
      { value: 40, percentage: 45 },
      { value: 40, percentage: -5 },
    ],
    [
      { value: 42, percentage: 20 },
      { value: 41, percentage: -50 },
      { value: 30, percentage: -70 },
      { value: 40, percentage: -15 },
      { value: 40, percentage: 60 },
      { value: 40, percentage: 30 },
    ],
    [
      { value: 49, percentage: -80 },
      { value: 40, percentage: 95 },
      { value: 40, percentage: -25 },
      { value: 35, percentage: 35 },
      { value: 40, percentage: 75 },
      { value: 40, percentage: -40 },
    ],
    [
      { value: 40, percentage: 55 },
      { value: 40, percentage: -90 },
      { value: 40, percentage: -10 },
      { value: 40, percentage: 80 },
      { value: 40, percentage: 25 },
      { value: 40, percentage: 50 },
    ],
  ],
};

export const HeatmapChartExample = () => {
  return (
    <div className="w-full">
      <Widget title="Service Performance by Room">
        <HeatmapChart data={heatmapData} />
      </Widget>
    </div>
  );
};