# Installation

> Install Honest UI charts and render a verified first chart.

Source: https://www.honestui.com/docs/charts/installation

Honest UI charts are available from the `honestui/charts` package entry point. Unlike CLI-installed UI components, charts remain an `honestui` package dependency.

## Requirements [#requirements]

* Node.js 20.18.1 or later.
* React 19.
* A container with an explicit height or aspect ratio.

## Install [#install]

<CommandBlock commands="[&#x22;honestui&#x22;]" />

## Import [#import]

Import chart roots, shared types, and chart-specific data types from the same entry point.

```tsx
import { BarChart, type ChartConfig } from "honestui/charts"
import "honestui/charts.css"
```

Load `honestui/charts.css` once in your application root. It contains only the utilities used by the chart package, so chart layout, loading states, tooltips, and keyboard-operable legends do not depend on your Tailwind content paths.

## Render a chart [#render-a-chart]

```tsx
const data = [
  { month: "Jan", completed: 18 },
  { month: "Feb", completed: 24 },
]

const chartConfig = {
  completed: {
    label: "Completed tasks",
    colors: { light: ["#2563eb"], dark: ["#60a5fa"] },
  },
} satisfies ChartConfig

export function CompletedTasksChart() {
  return (
    <BarChart data={data} config={chartConfig} className="h-72">
      <BarChart.XAxis dataKey="month" />
      <BarChart.Tooltip />
      <BarChart.Bar dataKey="completed" />
    </BarChart>
  )
}
```

Confirm that the chart has a visible height and that each `dataKey` exists in both the data rows and `chartConfig`. Add a visible summary or table if readers need the plotted values without pointer interaction.

## Next steps [#next-steps]

Choose a chart based on the comparison you need to show, then use [Chart Config](/docs/charts/chart-config) to define shared labels, colors, and icons.