mtgibbs/chartist-plugin-barlabels

Chartist-js Plugin for Bar Labels

chartist-plugin-barlabels

Chartist-js Plugin for labelling the end of bars in Bar Charts.

Usage

Default Options

There are two sets of default options depending on if the chart.options has horizontalBars set to true or false.

// if chart.options.horizontalBars == true

var defaultOptions = {
  labelClass: 'ct-label',
  labelInterpolationFnc: Chartist.noop,
  labelOffset: {
    x: 2,
    y: 4
  },
  labelPositionFnc: undefined,
  startAtBase: undefined,
  textAnchor: 'start',
  showZeroLabels: false,
  includeIndexClass: false,
  thresholdPercentage: 30,
  thresholdOptions: {
    belowLabelClass: 'ct-label-below',
    aboveLabelClass: 'ct-label-above'
  }
}

// if chart.options.horizontalBars == false / undefined

var defaultOptions = {
  labelClass: 'ct-label',
  labelInterpolationFnc: Chartist.noop,
  labelOffset: {
    x: 0,
    y: -2
  },
  labelPositionFnc: undefined,
  startAtBase: undefined,
  textAnchor: 'middle',
  showZeroLabels: false,
  includeIndexClass: false,
  thresholdPercentage: 30,
  thresholdOptions: {
    belowLabelClass: 'ct-label-below',
    aboveLabelClass: 'ct-label-above'
  }
}

Label Position Function

The label position function can be used to conditionally influence the location of the label relative to the bar. The function has some bar data being passed to it in this format:

{
  high: number; // the highest value in the chart or the defined high in the options
  value: number; // the value of the bar that the label will belong to
  threshold: number; // the percentage threshold defined in the options
}

The function must return labelOffset and textAnchor data otherwise when this data is undefined it will fall back on the default offsets.

{
  labelOffset: {
    x: number // the offset to the label on the X axis
    y: number // the offset to the label on the Y axis
  },
  textAnchor: string // the css text-anchor value
}

The plugin comes with a default example.

Chartist.plugins.ctBarLabels.InsetLabelsPositionHorizontal = function(data) {

  if (data.high && data.value && data.threshold) {
    var aboveThreshold = (data.value / data.high * 100 > data.threshold);

    if (aboveThreshold) {
      return {
        labelOffset: {
          x: -2,
          y: 4
        },
        textAnchor: 'end'
      }
    } else {
      return {
        labelOffset: {
          x: 2,
          y: 4
        },
        textAnchor: 'start'
      };
    }
  }
};

Example Script

new Chartist.Bar('#test-bar-chart', {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
    series: [
      [5, 4, 3, 7, 5, 10, 3],
      [1, 2, 3, 4, 5, 6, 7]
    ]
  }, {
    seriesBarDistance: 10,
    reverseData: true,
    horizontalBars: true,
    axisY: {
      offset: 70
    },
    plugins: [
      Chartist.plugins.ctBarLabels()
    ]
  });

Example Screenshot

chartist-plugin-barlabels's Issues

Forced to use Chartist 0.9.8 but get [object Object] as label

Wondering if this plugin works with latest Chartist 0.9.8 as I don't get any label but [object Object] instead.

error [object object]

hello i would like use this plugin for display data of bar but is display "[object object]

// test

     var datatestsSubscriptionChart = {
      labels: ['TST', 'DEV', 'ASB', 'INT'],
      series: [
        [20, 60, 40, 100]

      ]
    };
    var optionstestsSubscriptionChart = {
    plugins: [

Chartist.plugins.ctBarLabels()

],

    axisX: {
            showGrid: false
        },
        low: 0,
        high: 200,
        chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
    };
    var responsiveOptions = [
      ['screen and (max-width: 640px)', {
        seriesBarDistance: 8,
        axisX: {
          labelInterpolationFnc: function (value) {
            return value[0];
          }
        }
      }]
    ];

    var testsSubscriptionChart = Chartist.Bar('#testsSubscriptionChart', datatestsSubscriptionChart, optionstestsSubscriptionChart, responsiveOptions);

can help me ?

Angular component loading issue

Hi,

We are getting this error on page load, npm installed correctly. angular 14+

ROR Error: Uncaught (in promise): TypeError: Cannot set properties of undefined (setting 'returnExportsGlobal')
TypeError: Cannot set properties of undefined (setting 'returnExportsGlobal')
at Object. (chartist-plugin-barlabels.js:21:17)

Question

Hey,

I was wondering if it is possible to position the barlabel above the bar when the value is positive and below the bar when the value is negative.

My code for the bar chart options
plugins: [ Chartist.plugins.ctBarLabels({ textAnchor: 'middle', labelClass: 'ct-label', showZeroLabels: true, labelOffset: { x: 0, y: -15 }, }) ],

positions the label of positive values with an offset of -15 slightly above the bars.

When I have negative values it looks like this:

I would like to put the labels below the bars, please consider to add an example code on how to achieve this:

Best regards,
flix

Rotate -90deg

Hello

Is it possible to rotate the text?

Thanks.

provide label value in `labelInterpolationFnc`

right now labelInterpolationFnc is provided with series value, is it possible to get label value also there?

Thanks

That's all.