Series

<Line> Section titled <Line>

<Area> Section titled <Area>

<Point> Section titled <Point>

The point series is used to render <circle> elements representing the values in the chart. Is often used in combination with the Line or Area series to highlight the data points on the chart.

activeProps Section titled activeProps

The point series accepts the activeProps object to customize the appearance of the currently active <circle> element. This allows you to do things like animating the radius of an active point:

import { Axis, AxisCursor, AxisGrid, Chart, Point } from 'solid-charts'

const values = [1, 3, 2, 5, 3, 6, 2]

const ActivePointChart = () => {
  return (
    <div class="h-37.5 w-75">
      <Chart data={values} inset={12}>
        {/* // ... code truncated */}
        <Point
          r={4}
          class="text-sc-400 transition-all"
          activeProps={{ r: 10 }}
        />
      </Chart>
    </div>
  )
}

export default ActivePointChart

Hover over the chart:

<Bar> Section titled <Bar>

barConfig Section titled barConfig

For the bar series there is a global barConfig object on the <Chart> component that lets you modify the way multiple bar series are rendere together. It’s used to define values like the space between bars or their width. Have a look at the BarConfig type in the Chart API reference.

API Reference Section titled API Reference