https://github.com/codeyellowbv/chartist-plugin-axis-label
Axis labels plugin for Chartist.js
https://github.com/codeyellowbv/chartist-plugin-axis-label
Last synced: 10 months ago
JSON representation
Axis labels plugin for Chartist.js
- Host: GitHub
- URL: https://github.com/codeyellowbv/chartist-plugin-axis-label
- Owner: CodeYellowBV
- Created: 2015-03-26T11:20:51.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-01-13T09:59:49.000Z (over 10 years ago)
- Last Synced: 2025-03-06T01:45:43.303Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 4.88 KB
- Stars: 3
- Watchers: 13
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# chartist-plugin-axis-label
Implements axis labels (label on the X and Y axis) for [Chartist](https://github.com/gionkunz/chartist-js) charts.
This is a very basic plugin that could also be done outside the chart, but as it directly relates to the chart I wanted to include this in the chart.
## Install
As styles are very different with each project, no CSS is included. You can copy paste this to use as base:
```scss
.ct-chart {
position: relative;
}
.ct-axis-label {
position: absolute;
}
.ct-x-axis-label {
bottom: 0;
left: 50%;
}
.ct-y-axis-label {
transform: rotate(-90deg);
top: 50%;
left: -20px;
}
```
## Usage
In an example chart:
```js
new Chartist.Bar('.ct-chart', data, {
stackBars: true,
},
plugins: [
Chartist.plugins.axisLabel({
axisX: {
name: 'Dollars'
},
axisY: {
name: 'Quarters'
}
})
]
});
```
| __Option__ | __Description__ | __Type__ | __Default__ |
| --- | --- | --- | --- |
| `axisX.name` / `axisY.name` | Name of axis label. | `string` | `false` |
| `axisX.className` / `axisY.className` | Classname of axis label. | `string` | `ct-x-axis-label` / `ct-y-axis-label` |