Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[enhancement] Integrate Axis option for vertical bar charts #2

Open
ganar opened this issue Feb 16, 2018 · 0 comments
Open

[enhancement] Integrate Axis option for vertical bar charts #2

ganar opened this issue Feb 16, 2018 · 0 comments

Comments

@ganar
Copy link

ganar commented Feb 16, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant