2.0.0-rc13 • Published 2 years ago
capkpi-charts v2.0.0-rc13
Contents
Installation
Via NPM
Install via npm
:
$ npm install capkpi-charts
and include in your project:
import { Chart } from "capkpi-charts"
Or include following for es-modules(eg:vuejs):
import { Chart } from 'capkpi-charts/dist/capkpi-charts.esm.js'
// import css
import 'capkpi-charts/dist/capkpi-charts.min.css'
or include within your HTML
<script src="https://cdn.jsdelivr.net/npm/capkpi-charts@1.6.1/dist/capkpi-charts.min.umd.js"></script>
<!-- or -->
<script src="https://unpkg.com/capkpi-charts@1.6.1/dist/capkpi-charts.min.umd.js"></script>
Usage
const data = {
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
],
datasets: [
{
name: "Some Data", chartType: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", chartType: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
}
const chart = new capkpi.Chart("#chart", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', '#743ee2']
})
Or for es-modules (replace new capkpi.Chart()
with new Chart()
):
- const chart = new capkpi.Chart("#chart", {
+ const chart = new Chart("#chart", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', '#743ee2']
})
If you want to contribute:
- Clone this repo.
cd
into project directorynpm install
npm run dev
License
This repository has been released under the MIT License
Project maintained by CapKPI. Used in CapKPI ERP. Read the blog post.
2.0.0-rc13
2 years ago
1.6.3
2 years ago