@hudoro/chart

React chart component library for Hudoro UI. Saat ini mendukung standard bar chart, stacked bar chart, dan line chart dengan animasi, tooltip, formatter, dan empty state.

Requirements

• Node.js >=18
• react dan react-dom ^18

Install

pnpm add @hudoro/chart

Local Development

pnpm install
pnpm dev
pnpm build

• pnpm dev menjalankan playground lokal di http://localhost:3000
• pnpm build menghasilkan bundle library ke dist/

Standard Bar Usage

import {Chart, type ChartDatum} from "@hudoro/chart";

const data: ChartDatum[] = [
  {label: "Jan", value: 24, color: "#0f766e"},
  {label: "Feb", value: 38, color: "#0ea5e9"},
  {label: "Mar", value: 31, color: "#7c3aed"},
];

export function Example() {
  return (
    <Chart
      data={data}
      width={900}
      height={420}
      axisTicks={6}
      valueFormatter={(value) => `${value} jt`}
      barRadius={{topLeft: 18, topRight: 18}}
      animationDuration={850}
    />
  );
}

Stacked Bar Usage

import {Chart, type StackedChartDatum} from "@hudoro/chart";

const data: StackedChartDatum[] = [
  {
    label: "Jan",
    segments: [
      {label: "Subscription", value: 12, color: "#2563eb"},
      {label: "Services", value: 8, color: "#0f766e"},
      {label: "Add-on", value: 4, color: "#f59e0b"},
    ],
  },
  {
    label: "Feb",
    segments: [
      {label: "Subscription", value: 18, color: "#2563eb"},
      {label: "Services", value: 11, color: "#0f766e"},
      {label: "Add-on", value: 9, color: "#f59e0b"},
    ],
  },
];

export function StackedExample() {
  return (
    <Chart
      data={data}
      variant="stacked"
      width={900}
      height={380}
      axisTicks={4}
      valueFormatter={(value) => `${value} jt`}
    />
  );
}

Line Chart Usage

import {Chart, type ChartDatum} from "@hudoro/chart";

const data: ChartDatum[] = [
  {label: "Jan", value: 24, color: "#0f766e"},
  {label: "Feb", value: 38, color: "#0ea5e9"},
  {label: "Mar", value: 31, color: "#7c3aed"},
  {label: "Apr", value: 52, color: "#f59e0b"},
];

export function LineExample() {
  return (
    <Chart
      data={data}
      variant="line"
      width={900}
      height={380}
      axisTicks={4}
      curve="smooth"
      lineColor="#0f172a"
      pointRadius={5}
      showValues
      valueFormatter={(value) => `${value} jt`}
    />
  );
}

Main Props

• data: ChartDatum[] untuk standard bar dan line chart, atau StackedChartDatum[] untuk stacked bar
• variant: "bar", "stacked", atau "line"
• orientation: "vertical" atau "horizontal"
• axisTicks: jumlah tick sumbu nilai
• axisFormatter: formatter label sumbu
• valueFormatter: formatter nilai bar, total stack, dan tooltip
• showValues: tampilkan atau sembunyikan nilai di dekat bar atau total stack
• showGridLines: tampilkan atau sembunyikan grid
• showLegend: tampilkan atau sembunyikan legend stacked bar
• barRadius: angka tunggal atau object seperti { topLeft, topRight, bottomRight, bottomLeft }
• curve: "straight" atau "smooth" untuk line chart
• lineColor: warna stroke utama line chart
• pointColor: warna default titik line chart
• lineWidth: ketebalan garis line chart
• pointRadius: radius titik line chart
• showPoints: tampilkan atau sembunyikan marker titik
• emptyMessage: pesan saat data kosong
• animationDuration: durasi animasi dalam milidetik

Prop lama horizontal, yAxisTicks, dan formatValue masih didukung untuk backward compatibility, tetapi penggunaan baru sebaiknya memakai orientation, axisTicks, dan valueFormatter.

Contoh jika hanya ingin radius di sudut atas:

<Chart
  data={data}
  barRadius={{topLeft: 20, topRight: 20, bottomLeft: 0, bottomRight: 0}}
/>

Current Scope

• Standard bar chart vertical
• Standard bar chart horizontal
• Stacked bar chart vertical
• Stacked bar chart horizontal
• Line chart vertical
• Tooltip hover
• Enter/update animation
• Dense label handling
• Empty state

Implementasi utama ada di src/chart/, dan contoh penggunaan lengkap tersedia di dev/index.tsx.