Skip to content

alexstanbury/chartist-plugin-axistitle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Axis title plugin for Chartist.js

This plugin allows the creation and placement of axis titles. The plugin will throw an error if it is applied to a chart that contains no axes, such as a Pie chart.

In order to use it, you will need to include the excellent charting library Chartist.js in your page.

http://gionkunz.github.io/chartist-js/index.html

Installation

Install using npm:

npm install chartist-plugin-axistitle

Available options and their defaults

var defaultOptions = {
  // The title to be displayed on the axis. If at least one axis title is not supplied then an error is thrown.
  // This can also be passed a function to enable simple updating of the title if your chart data changes.
  axisTitle: "",

  // One or more class names to be added to the axis title.
  // Multiple class names should be separated by a space.
  // This can also be passed a function to enable simple updating of the classes if your chart data changes.
  axisClass: "ct-axis-title",

  // How much to offset the title by.
  // Please note, x and y offset values for axisY are flipped due to the rotation of the axisY title by 90 degrees.
  // Therefore changing the x value moves up/down the chart, while changing y moves left/right.
  offset: { x: 0, y: 0 },

  // Defines the anchoring of the title text. Possible values are 'start', 'end' and 'middle'.
  textAnchor: "middle",

  // Whether to flip the direction of the text. Note - This can only be used on axis Y.
  flipTitle: false
};

Sample usage

var chart = new Chartist.Line(
  ".ct-chart",
  {
    labels: [
      "0-15",
      "16-30",
      "31-45",
      "46-60",
      "61-75",
      "76-90",
      "91-105",
      "106-120"
    ],
    series: [[1, 3, 7, 12, 1, 2, 1, 0]]
  },
  {
    chartPadding: {
      top: 20,
      right: 0,
      bottom: 20,
      left: 0
    },
    axisY: {
      onlyInteger: true
    },
    plugins: [
      Chartist.plugins.ctAxisTitle({
        axisX: {
          axisTitle: "Time (mins)",
          axisClass: "ct-axis-title",
          offset: {
            x: 0,
            y: 50
          },
          textAnchor: "middle"
        },
        axisY: {
          axisTitle: "Goals",
          axisClass: "ct-axis-title",
          offset: {
            x: 0,
            y: -1
          },
          flipTitle: false
        }
      })
    ]
  }
);

Example

Install using npm install then run/edit the example.html file to see the plugin in action.

Build

Use npm run build to build a minimised version.