scrollbar data in chart js
npm install chartjs-plugin-scroll-bar
npm install chartjs-plugin-scroll-bar
`
`javascript
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
$3
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
`javascript
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.
1. Fork it!
2. Create your feature branch: git checkout -b feature_name
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature_name
5. Submit a pull request!
$3
- install: npm install
- publish plugin: npm version (major|minor|patch) && npm run build:publish`