# new Chart(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myChart = document.createElement("a-chart").init(config)
Or use the shorthand for it:
const myChart = createChart({
chartType: "bar",
data: {...},
options: {...},
width: 300,
height: 200
})
myChart.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "chart",
chartType: "bar",
data: {...},
options: {...},
width: 300,
height: 200
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
chartType |
string
|
Chart type (bar, line, pie, ... check Chart.js documentation) |
|
data |
object
|
Chart data (https://www.chartjs.org/docs/latest/general/data-structures.html) |
|
options |
object
|
Chart options (https://www.chartjs.org/docs/latest/general/options.html) |
|
plugins |
object
|
<optional> |
Chart plugins (https://www.chartjs.org/docs/latest/developers/plugins.html) |
width |
integer
|
<optional> |
Width in pixels |
height |
integer
|
<optional> |
Height in pixels |
useCDN |
boolean
|
<optional> |
Set to false to use the local version of ChartJS. Default is true. |
useDataLabels |
boolean
|
<optional> |
Set to true to use the plugin for data labels. Default is false. See https://chartjs-plugin-datalabels.netlify.app/ |
useMoment |
boolean
|
<optional> |
Set to true to use the plugin for moment.js. Default is false. See https://github.com/chartjs/chartjs-adapter-moment |
this
Generated markup
<a-chart class="a-chart">
<canvas id="chart-id">
<!-- Chart.js canvas -->
</canvas>
</a-chart>
Methods
# destroy()
Destroy the chart
https://www.chartjs.org/docs/latest/developers/api.html
# downloadBase64Image(config)
Download the chart as an image
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
filename |
string
|
<optional> |
image filename. Default is "chart.jpg" |
type |
string
|
<optional> |
image type (image/png, image/jpeg, image/webp, ...). Default is "image/jpg" |
quality |
number
|
<optional> |
0 to 1. Default is 1 |
# async refresh(config)
Refresh the chart with new data and/or options
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
chartType |
object
|
<optional> |
New chart type |
data |
object
|
<optional> |
New chart data |
options |
object
|
<optional> |
New chart options |
useDataLabels |
boolean
|
<optional> |
Set to true to use the plugin for data labels |
useMoment |
boolean
|
<optional> |
Set to true to use the adapter for moment.js |
# reset()
Reset the chart
https://www.chartjs.org/docs/latest/developers/api.html
# resize(width, height)
Resize the chart
Parameters:
| Name | Type | Description |
|---|---|---|
width |
number
|
Width in pixels |
height |
number
|
Height in pixels |
# toBase64Image(type, quality) → {string}
Export the chart to an image
https://www.chartjs.org/docs/latest/developers/api.html
Parameters:
| Name | Type | Description |
|---|---|---|
type |
string
|
image type (image/png, image/jpeg, image/webp, ...) |
quality |
number
|
0 to 1 |
Base64 image
string
Example
```
// Returns a png data url of the image on the canvas
const imageAsPng = myChart.toBase64Image()
// Returns a jpeg data url in the highest quality of the canvas
const imageAsJpg = myChart.toBase64Image("image/jpg", 1)
```# update()
Update the chart
https://www.chartjs.org/docs/latest/developers/api.html