chartjs-plugin-scroll-bar
v1.3.0
Published
scrollbar data in chart js
Downloads
198
Readme
Chart.js plugin scroll bar
This plugin for Chart.js that make scrollable charts in descriptors. Requires Chart.js v3.9.1 or higher.
Installation
npm
npm install chartjs-plugin-scroll-bar
import { Chart } from 'chartjs';
import ChartjsPluginScrollBar from 'chartjs-plugin-scroll-bar';
Chart.register(ChartjsPluginScrollBar);
Options
| Name |Type |Default |Description | | :------------------|:------|:--------|:------------------------------------------------------------------------------------------------------------------------------------------| | enable |boolean|undefined| | | scrollType | 'Horizontal' | 'Vertical' | undefined | depend on chart option indexAxis so x -> horizontal y-> vertical. |
Usage
Basic
specify plugin options with scrollBar: {enable: true, scrollType: 'Horizontal'}
.
you must use indexAxis and min max of scales for working scrollbar.
scroll size should be the difference between min and max of descriptor scale + 1.
example
new Chart(document.getElementById("my-chart"), {
type: "bar",
data: {
labels: ["Foo", "Bar", "flare"],
datasets: [
{ label: "bad", data: [5, 25], backgroundColor: "rgba(244, 143, 177, 0.6)" },
{ label: "better", data: [15, 10], backgroundColor: "rgba(255, 235, 59, 0.6)" },
{ label: "good", data: [10, 8], backgroundColor: "rgba(100, 181, 246, 0.6)" },
],
},
options: {
indexAxis: "x",
scales: {
x: {
min: 0,
max: 1,
}
}
plugins: {
scrollBar: {enable: true, scrollType: 'Horizontal'},
},
},
});
Supported chart types
- any chart indexAxis x or y.
Contributing
Pull requests and issues are always welcome.
For bugs and feature requests, please create an issue.
- Fork it!
- Create your feature branch:
git checkout -b feature_name
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin feature_name
- Submit a pull request!
Development
- install:
npm install
- publish plugin:
npm version (major|minor|patch) && npm run build:publish