csingh / chartist-plugin-vertical-line

Simple plugin for Chartist.js that will allow you to label a graph segment.

Vertical Line plugin for Chartist.js

This is a simple plugin for Chartist.js that will allow you to draw 2 vertical lines around a graph segment, and label it.

Note: This is just a modified version of chartist-plugin-vertical-line, so thanks to @zubenkoivan for the original code!

Please visit http://gionkunz.github.io/chartist-js/plugins.html for more information.

Available options and their defaults

var defaultOptions = {
  line_positions: undefined,
  label: undefined,
  className: 'vertical-line'
};

Sample usage in Chartist.js

This will draw vertical lines at the first point (index:0) and the second point (index:1) on the graph, and put a label between them. (Note: Check out demo/index.html for a full example)

var chart = new Chartist.Line('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
}, {
  plugins:
    Chartist.plugins.verticalLine({
      line_positions: [0,1],
      label: "Label 1",
    })
  ]
});