https://github.com/marcodpt/chart
A chart element based on chart.js
https://github.com/marcodpt/chart
chart chartjs dom element es6 es6-module esm
Last synced: 12 months ago
JSON representation
A chart element based on chart.js
- Host: GitHub
- URL: https://github.com/marcodpt/chart
- Owner: marcodpt
- License: mit
- Created: 2021-06-28T19:37:08.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-11T14:48:04.000Z (almost 4 years ago)
- Last Synced: 2025-01-13T15:27:52.612Z (about 1 year ago)
- Topics: chart, chartjs, dom, element, es6, es6-module, esm
- Language: JavaScript
- Homepage: https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fchart%2Fsamples.js
- Size: 8.79 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# chart
> A chart element based on [chart.js](https://www.chartjs.org/)
[Live demo](https://marcodpt.github.io/h/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fchart%2Fsamples.js)
## Usage
```js
import chart from 'https://cdn.jsdelivr.net/gh/marcodpt/chart/index.js'
document.body.appendChild(chart({
X: ['Jan', 'Fev', 'Mar'],
Y: [1.5, 3.0, 4.5]
}))
document.body.appendChild(chart({
X: ['Jan', 'Fev', 'Mar'],
Y: [
{
data: [1.5, 3.0, 4.5],
borderColor: 'blue',
label: 'Sells ($)'
}, {
data: [2.5, 3.0, 2.5],
borderColor: 'red',
label: 'Expenses ($)'
}
]
}))
```
## Params
- string `type`: type of chart (default: line)
- object `options`: chart options (default: {})
- array `X`: labels of X axis
- array `Y`: items can be just axis Y values or a object with the following
props:
- array `data`: axis Y values of this line
- string `borderColor`: color of line
- string `label`: the chart label of this line