htwyford/chartist-plugin-targetline

Target line plugin for Chartist.js

Target Line plugin for Chartist.js

A plugin for Chartist.js that allows the drawing of a target line on a chart.

Download

Download from npm:

npm install chartist-plugin-targetline

or bower:

bower install chartist-plugin-targetline

Available options and their defaults

var defaultOptions = {
  value = null,
  class = 'ct-target-line'
};

Sample usage in Chartist.js

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7],
  series: [
    [1, 5, 3, 4, 6, 2, 3],
    [2, 4, 2, 5, 4, 3, 6]
  ]
}, {
  plugins: [
    Chartist.plugins.ctTargetLine({
      value: 1000
    })
  ]
});

.ct-target-line {
    stroke: blue;
    stroke-width: 2px;
    stroke-dasharray: 4px;
    shape-rendering: crispEdges;
}

chartist-plugin-targetline's Issues

NuGet package

Hey there;

I maintain NuGet packages for the Chartist library - I saw that your plugin has been added to the plugin list on the website, so I went ahead and created a package for it: https://www.nuget.org/packages/ChartistJS.TargetLine/

If you don't want your plugin hosted on NuGet (or prefer to manage it yourself), let me know and I can remove it or transfer ownership of the package to your NuGet account (whichever makes the most sense).

Thanks!

[enhancement] Integrate Axis option for vertical bar charts

I modified your plugin to allow drawing the line on vertical Bar Charts

/**
 * Chartist.js plugin to display a target line on a chart.
 * With code from @gionkunz in https://github.com/gionkunz/chartist-js/issues/235
 * and @OscarGodson in https://github.com/gionkunz/chartist-js/issues/491.
 * Based on https://github.com/gionkunz/chartist-plugin-pointlabels
 */
/* global Chartist */
(function(window, document, Chartist) {
  'use strict';

  var defaultOptions = {
    class: 'ct-target-line',
    value: null,
    ChartAxis: 'y'
  };

  Chartist.plugins = Chartist.plugins || {};
  Chartist.plugins.ctTargetLine = function(options) {

    options = Chartist.extend({}, defaultOptions, options);

    return function ctTargetLine(chart) {
        function projectY(chartRect, bounds, value) {
  					return chartRect.y1 - (chartRect.height() / bounds.max * value)
  				}
         
        function projectX(chartRect, bounds, value) {
            return chartRect.x1 + (chartRect.width() / bounds.max * value)
          }
       

        chart.on('created', function (context) {
          if (options.ChartAxis==="y"){
          var targetLineY = projectY(context.chartRect, context.bounds, options.value);

          context.svg.elem('line', {
            x1: context.chartRect.x1,
            x2: context.chartRect.x2,
            y1: targetLineY,
            y2: targetLineY
          }, options.class);

        } else {

          var targetLineX = projectX(context.chartRect, context.bounds, options.value);

          context.svg.elem('line', {
            x1: targetLineX,
            x2: targetLineX,
            y1: context.chartRect.y1,
            y2: context.chartRect.y2
          }, options.class);
        }


        });
    };
  };
}(window, document, Chartist));

the code is very close to what @OscarGodson did in 2015 (thanks Oscar!)

Target line position with LOW property

When using the followin property (LOW: 50):

The line is not drawn in a correct position.

Example is wrong?

Hi,
I think that the example must have Chartist.plugins. before ctTargetLine

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7],
  series: [
    [1, 5, 3, 4, 6, 2, 3],
    [2, 4, 2, 5, 4, 3, 6]
  ]
}, {
  plugins: [
     Chartist.plugins.ctTargetLine({
      value: 1000
    })
  ]
});

Because if not, it is not defined