README

chartist-plugin-labelclasses

Chartist-js Plugin for adding css classes to Labels

Usage

Default Options

The chart options that are valid depend on the chart type.

Pie Label Classes are only applied to pie charts.
X and Y Axis Label Classes are applied to line and bar charts.

var defaultOptions = {
  axisXLabelClasses: [],
  axisYLabelClasses: [],
  pieLabelClasses: []
};

Example Script

The classes are applied in order with the data series that has been defined.

So in this pie chart example:

5: 'ct-x'
3: 'ct-y'
4: 'ct-z'

new Chartist.Pie('#example-pie-chart', {
  series:  [5, 3, 4]
} , {
  plugins: [
    Chartist.plugins.ctLabelClasses({
      pieLabelClasses: ['ct-x', 'ct-y', 'ct-z']
    })
  ]
});

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.ctLabelClasses({
      axisXLabelClasses: ['first'],
      axisYLabelClasses: ['foo', 'bar', 'foobar']
    })
  ]
});

TODO

Honor the reverseData flag so that classes for the labels are reversed as well.
Allow for gaps in classes
Allow for ranges of classes

License

Licensed under the WTFPL to be in line with Chartist License.

Usage no npm install needed!