Skip to main content

​
Overview

Openlane UI provides chart components built with Recharts for visualizing data. The LineChart is based on Tremor’s implementation with customizations for interactive data exploration.

​
LineChart

​
Import

import { LineChart } from '@repo/ui'

​
Usage

import { LineChart } from '@repo/ui'

const data = [
  { date: 'Jan 1', sales: 120, revenue: 450 },
  { date: 'Jan 2', sales: 150, revenue: 520 },
  { date: 'Jan 3', sales: 180, revenue: 600 },
]

const valueFormatter = (value: number) => `$${value}`

function MyChart() {
  return (
    <LineChart
      data={data}
      index="date"
      categories={['sales', 'revenue']}
      colors={['blue', 'emerald']}
      valueFormatter={valueFormatter}
      yAxisWidth={60}
    />
  )
}

​
Props

​
data
Record<string, any>[]
required
Array of data objects to visualize.
​
index
string
required
The key in the data object to use for the x-axis.
​
categories
string[]
required
Array of data keys to plot as lines.
​
colors
AvailableChartColorsKeys[]
default:"AvailableChartColors"
Array of color keys for each category. Available colors include: ‘blue’, ‘emerald’, ‘jade’, ‘saffron’, ‘red’, etc.
​
valueFormatter
(value: number) => string
default:"(value) => value.toString()"
Function to format values displayed in tooltips and y-axis.
​
startEndOnly
boolean
default:"false"
If true, only shows start and end ticks on x-axis.
​
showXAxis
boolean
default:"true"
Whether to display the x-axis.
​
showYAxis
boolean
default:"true"
Whether to display the y-axis.
​
showGridLines
boolean
default:"true"
Whether to display grid lines.
​
yAxisWidth
number
default:"56"
Width of the y-axis in pixels.
​
intervalType
'preserveStartEnd' | 'equidistantPreserveStart'
default:"'equidistantPreserveStart'"
How to space x-axis ticks.
​
showTooltip
boolean
default:"true"
Whether to display tooltips on hover.
​
showLegend
boolean
default:"true"
Whether to display the legend.
​
autoMinValue
boolean
default:"false"
Automatically calculate minimum y-axis value.
​
minValue
number
Minimum value for y-axis.
​
maxValue
number
Maximum value for y-axis.
​
allowDecimals
boolean
default:"true"
Whether to allow decimal values on y-axis.
​
onValueChange
(value: LineChartEventProps) => void
Callback fired when a data point or category is clicked.
​
enableLegendSlider
boolean
default:"false"
Enables horizontal scrolling for the legend if items don’t fit.
​
tickGap
number
default:"5"
Minimum gap between x-axis ticks.
​
connectNulls
boolean
default:"false"
Whether to connect line segments across null values.
​
xAxisLabel
string
Label for the x-axis.
​
yAxisLabel
string
Label for the y-axis.
​
legendPosition
'left' | 'center' | 'right'
default:"'right'"
Position of the legend.
​
tooltipCallback
(tooltipCallbackContent: TooltipProps) => void
Callback fired when tooltip content changes.
​
customTooltip
React.ComponentType<TooltipProps>
Custom tooltip component.
​
className
string
Additional CSS classes.

​
Custom Tooltip Example

import { LineChart, TooltipProps } from '@repo/ui'

const CustomTooltip = ({ payload, active, label }: TooltipProps) => {
  if (!active || !payload || payload.length === 0) return null

  return (
    <div className="rounded-md border bg-white p-4 shadow-md">
      <p className="font-medium">{label}</p>
      {payload.map((item, index) => (
        <div key={index} className="flex items-center gap-2">
          <span className="text-sm">{item.category}:</span>
          <span className="font-medium">{item.value}</span>
        </div>
      ))}
    </div>
  )
}

function MyChart() {
  return (
    <LineChart
      data={data}
      index="date"
      categories={['sales', 'revenue']}
      customTooltip={CustomTooltip}
    />
  )
}

​
Interactive Events

import { LineChart, LineChartEventProps } from '@repo/ui'

function MyChart() {
  const handleValueChange = (event: LineChartEventProps) => {
    if (event) {
      console.log('Event type:', event.eventType) // 'dot' or 'category'
      console.log('Category clicked:', event.categoryClicked)
    }
  }

  return (
    <LineChart
      data={data}
      index="date"
      categories={['sales', 'revenue']}
      onValueChange={handleValueChange}
    />
  )
}

​
DonutChart

​
Import

import { DonutChart } from '@repo/ui'

​
Usage

import { DonutChart } from '@repo/ui'

const data = [
  { name: 'Category A', value: 400 },
  { name: 'Category B', value: 300 },
  { name: 'Category C', value: 200 },
  { name: 'Category D', value: 100 },
]

function MyDonutChart() {
  return (
    <DonutChart
      data={data}
      colors={['#0088FE', '#00C49F', '#FFBB28', '#FF8042']}
      innerRadius={60}
      outerRadius={80}
      width={300}
      height={300}
    />
  )
}

​
Props

​
data
{ name: string; value: number }[]
required
Array of data objects with name and value properties.
​
colors
string[]
default:"['#0088FE', '#00C49F', '#FFBB28', '#FF8042']"
Array of color hex codes for each segment.
​
innerRadius
number
default:"60"
Inner radius of the donut in pixels.
​
outerRadius
number
default:"80"
Outer radius of the donut in pixels.
​
width
number
default:"300"
Width of the chart container in pixels.
​
height
number
default:"300"
Height of the chart container in pixels.

​
Types

​
LineChartEventProps

type BaseEventProps = {
  eventType: 'dot' | 'category'
  categoryClicked: string
  [key: string]: number | string
}

type LineChartEventProps = BaseEventProps | null | undefined

​
TooltipProps

interface TooltipProps {
  active: boolean | undefined
  payload: PayloadItem[]
  label: string
}

type PayloadItem = {
  category: string
  value: number
  index: string
  color: AvailableChartColorsKeys
  type?: string
  payload: any
}

​
Sources

  • LineChart: /home/daytona/workspace/source/packages/ui/src/chart/chart.tsx
  • DonutChart: /home/daytona/workspace/source/packages/ui/src/chart/donut-chart.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us