htwyford/chartist-plugin-targetline

[enhancement] Integrate Axis option for vertical bar charts

Opened this issue · 0 comments

ganar commented

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!)