chartist-plugin-barlabels

Bar Labels Plugin for Chartist.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
chartist-plugin-barlabels
720.0.57 years ago7 years agoMinified + gzip package size for chartist-plugin-barlabels in KB

Readme

chartist-plugin-barlabels
Build Status NPM Version Chartist-js Plugin for labelling the end of bars in Bar Charts.

Usage

Default Options
There are two sets of default options depending on if the chart.options has horizontalBars set to true or false. ```javascript // if chart.options.horizontalBars == true var defaultOptions = { labelClass: 'ct-label', labelInterpolationFnc: Chartist.noop, labelOffset: {
x: 2,
y: 4
}, textAnchor: 'start', showZeroLabels: false, includeIndexClass: false, thresholdOptions: {
percentage: 30,
belowLabelClass: 'ct-label-below',
aboveLabelClass: 'ct-label-above'
} } ``` ```javascript // if chart.options.horizontalBars == false / undefined var defaultOptions = { labelClass: 'ct-label', labelInterpolationFnc: Chartist.noop, labelOffset: {
x: 0,
y: -2
}, textAnchor: 'middle', showZeroLabels: false, includeIndexClass: false, thresholdOptions: {
percentage: 30,
belowLabelClass: 'ct-label-below',
aboveLabelClass: 'ct-label-above'
} } ```
Example Script
```javascript new Chartist.Bar('#test-bar-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[1, 2, 3, 4, 5, 6, 7]
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
},
plugins: [
Chartist.plugins.ctBarLabels()
]
}); ```
Example Screenshot
Example Graph