Chart

The Chart component provides a simple way to use various types of charts. By specifying the type prop, you can easily render bar, line, pie, and heatmap charts with a consistent API.

Import

To use the Chart component, import it from the library:

import { Chart } from 'h2o-library';

Bar Chart

Use a bar chart to compare values across different categories. The bar chart supports single, grouped, and stacked layouts, as well as vertical and horizontal orientations.

Standard Bar Chart with KPIs

This example shows a standard bar chart with Key Performance Indicators (KPIs).

const barChartData = [
  { name: "Jan", "Page Views": 4000, "Unique Visitors": 2400 },
  { name: "Feb", "Page Views": 3000, "Unique Visitors": 1398 },
  { name: "Mar", "Page Views": 2000, "Unique Visitors": 9800 },
  { name: "Apr", "Page Views": 2780, "Unique Visitors": 3908 },
  { name: "May", "Page Views": 1890, "Unique Visitors": 4800 },
];

<Chart
  type="bar"
  title="Website Traffic"
  description="Monthly page views and unique visitors"
  kpis={[
    { label: "Total Page Views", value: "1.2M" },
    { label: "Unique Visitors", value: "800K" },
  ]}
  data={barChartData}
/>

Grouped Bar Chart

Use the layout="grouped" prop to group bars for comparison.

const barChartDataGrouped = [
  { name: 'Jan', completed: 4000, missed: 2400, rescheduled: 1000 },
  { name: 'Feb', completed: 3000, missed: 1398, rescheduled: 800 },
  // ... more data
];

<Chart
  type="bar"
  title="Appointments by Month"
  description="Appointment status distribution"
  data={barChartDataGrouped}
  layout="grouped"
/>

Stacked Bar Chart

Use layout="stacked" to stack bars on top of each other.

const barChartDataStacked = [
  { name: 'Jan', cardiology: 1200, dermatology: 2300, neurology: 500 },
  { name: 'Feb', cardiology: 1500, dermatology: 2100, neurology: 600 },
  // ... more data
];

<Chart
  type="bar"
  title="Cases by Specialty"
  description="Monthly case volume by medical specialty"
  data={barChartDataStacked}
  layout="stacked"
/>

Horizontal Bar Chart

Set orientation="horizontal" to display bars horizontally. This can be combined with any layout.

<Chart
  type="bar"
  title="Cases by Specialty (Horizontal)"
  description="Monthly case volume by medical specialty"
  data={barChartDataStacked}
  layout="stacked"
  orientation="horizontal"
/>

Line Chart

Line charts are ideal for showing trends over time.

const lineChartData = [
  { name: "Jan", "New Customers": 30, "Returning Customers": 10 },
  { name: "Feb", "New Customers": 45, "Returning Customers": 20 },
  { name: "Mar", "New Customers": 60, "Returning Customers": 35 },
  { name: "Apr", "New Customers": 50, "Returning Customers": 40 },
  { name: "May", "New Customers": 70, "Returning Customers": 55 },
];

<Chart
  type="line"
  title="Customer Growth"
  description="New vs. returning customers over time"
  data={lineChartData}
/>

Pie Chart

Pie charts are useful for showing proportions of a whole.

const pieChartData = [
  { name: "Organic Search", value: 55 },
  { name: "Direct", value: 25 },
  { name: "Referral", value: 15 },
  { name: "Social", value: 5 },
];

<Chart
  type="pie"
  title="Traffic Sources"
  description="Breakdown of website traffic by source"
  data={pieChartData}
  kpis={[
    { label: "Total Sessions", value: "5.4K" },
    { label: "Bounce Rate", value: "45%" },
  ]}
/>

Heatmap Chart

Heatmap charts are great for visualizing the magnitude of a phenomenon as color in two dimensions.

const heatmapData = {
  rows: ["Feature A", "Feature B", "Feature C", "Feature D"],
  columns: ["Mon", "Tue", "Wed", "Thu", "Fri"],
  data: [
    [
      { value: 10, percentage: 20 }, { value: 25, percentage: -10 },
      { value: 15, percentage: 5 }, { value: 30, percentage: 15 },
      { value: 20, percentage: -5 },
    ],
    // ... more rows
  ],
};

<Chart
  type="heatmap"
  title="User Engagement"
  description="Weekly user activity on different features"
  data={heatmapData}
/>

Props

The Chart component accepts the following props:

Prop	Type	Description
type	"bar" | "line" | "pie" | "heatmap"	The type of chart to render.
data	any[] or HeatmapData	The data for the chart.
title	string	(Optional) The title of the chart.
description	string	(Optional) A description for the chart.
tooltip	string	(Optional) Tooltip for the chart title.
kpis	ChartKPI[]	(Optional) Key Performance Indicators.
height	number	(Optional) The height of the chart. Default is 400.

Bar Chart Specific Props

When type="bar", you can also use these props:

Prop	Type	Default	Description
layout	"single" | "grouped" | "stacked"	"single"	The layout of the bars.
orientation	"vertical" | "horizontal"	"vertical"	The orientation of the bars.