Chart

<sl-chart> | SlChart

Since 2.0

hub24

Chart component

<sl-chart style="height: 300px"
  labels='["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]'
  datasets='[{ "title": "# of Votes", "values": [12, 19, 3, 5, 2, 3] }]'>
</sl-chart>

Examples

Line chart

<sl-chart style="height: 300px" type="line"
  labels='["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]'
  datasets='[{ "title": "# of Votes", "values": [12, 19, 3, 5, 2, 3] }]'>
</sl-chart>

Pie chart

<sl-chart style="height: 300px" type="pie"
  labels='["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]'
  datasets='[{ "title": "# of Votes", "values": [12, 19, 3, 5, 2, 3] }]'>
</sl-chart>

No animation

<sl-chart style="height: 300px" type="bar" animation-time="0"
  labels='["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]'
  datasets='[{ "title": "# of Votes", "values": [12, 19, 3, 5, 2, 3] }]'>
</sl-chart>

Animation time

<sl-chart style="height: 300px" type="bar" animation-time="5000"
  labels='["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]'
  datasets='[{ "title": "# of Votes", "values": [12, 19, 3, 5, 2, 3] }]'>
</sl-chart>

[component-metadata:sl-chart]

Properties

Name	Description	Type	Default
`type`	Type of chart	`'bar' \| 'pie' \| 'line' \| 'doughnut'`	`'bar'`
`chart`	Chart object	`Chart \| null`	`null`
`labels`	Labels for the chart	`string[]`	`[]`
`datasets`	Datasets for the chart	`DataSet[]`	`[]`
`animationTime` `animation-time`	Animation duration for the chart	`number`	`200`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.