Chart

The <Chart> component is the root of every chart. It’s where you feed in your data and set up global chart options. This component shares a context with its children, letting you build your chart in a flexible and composable way.

This component renders the svg element that contains the chart. It forwards all props to the element, so you can use any valid svg attributes to customize your chart.

Data structure Section titled Data structure

The data structure can either be a simple array of numbers or an array of objects for charts that require additional data like axis labels or multiple series.

Simple data Section titled Simple data

A very basic chart can be created with an array of numbers:

import { Chart, Line } from 'solid-charts'

const data = [0, 3, 2, 5, 3, 6, 2]

const SimpleChart = () => {
  return (
    <div class="h-37.5 w-75">
      <Chart data={data}>
        <Line stroke-width={5} class="stroke-sc-400" />
      </Chart>
    </div>
  )
}

export default SimpleChart

This will render this simple line chart:

Object data Section titled Object data

For charts that require more than a single series of data, you’ll have to provide an array of objects. Make sure that every object contains all the properties that you access in your chart.

Let’s create a chart with two series and an x-axis label:

import { Axis, AxisGrid, AxisLabel, AxisLine, Chart, Line } from 'solid-charts'

const data = [
  {
    line1: 0,
    line2: 7,
    xAxis: 'Day 1',
  },
  {
    line1: 3,
    line2: 5,
    xAxis: 'Day 2',
  },
  // ... code truncated
]

const ObjectDataChart = () => {
  return (
    <div class="h-37.5 w-125">
      <Chart data={data}>
        <Axis axis="y" position="left">
          <AxisLabel />
          <AxisGrid class="opacity-20" />
        </Axis>
        <Axis axis="x" position="bottom" dataKey="xAxis">
          <AxisLabel />
          <AxisLine />
        </Axis>
        <Line dataKey="line1" stroke-width={3} class="stroke-sc-400" />
        <Line dataKey="line2" stroke-width={3} class="stroke-sc-400" />
      </Chart>
    </div>
  )
}

export default ObjectDataChart

This will render a chart with two series and an x-axis label:

Sizing Section titled Sizing

By default, the viewBox of the chart matches the rendered size of the chart. If you want to adjust this, you can do so by setting the width and height props. This is useful if you want the chart to scale with the parent but keep its internal size ratios.

The svg will always take up the entire size of its parent container, if you want to change the rendered size, you’ll have to adjust the container element.

Examples Section titled Examples

Fixed viewBox

This chart will take up the full width and height of its parent container and will scale to remain a fixed viewBox of 400x200.

<div>
  <Chart width={400} height={200}>
    ...
  </Chart>
</div>

Aspect ratio

This chart will render with the size of the parent container, adopting its aspect ratio of 4:3.

<div
  style={{
    height: "400px",
    "aspect-ratio": "4 / 3"
  }}
>
  <Chart>
    ...
  </Chart>
</div>

Inset Section titled Inset

By default, the chart will render with an inset padding of 8px. This is to accommodate for line series with curve interpolation that might overflow the chart area. You can modify this inset or remove it with the inset property:

<Chart
  inset={{
    top: 16,
    right: 0,
    bottom: 0,
    left: 0
  }}
>

This sets the top inset to 16px and removes the other insets. To remove all insets, you can provide a single value:

<Chart inset={0}>

API Reference Section titled API Reference

type BarConfig = {
  bandGap: number | `${number}%`,
  barGap: number | `${number}%`,
  barSize: number | `${number}%`,
  maxBarSize: number | `${number}%`,
}