Chartist plugin data point for bar chart - plugins

Question

I'm trying to get data point to work for bar charts, I found the plugin for line chart, but can't get it to work for bars, can anyone help? the data point should show above the bar. https://jsfiddle.net/x79b1m2w/1/
<div class="ct-chart ct-golden-section" id="chart1"></div>
<div class="ct-chart ct-golden-section" id="chart2"></div>
<script>
new Chartist.Bar('#chart1', {
labels: ['M', 'T', 'W', 'T', 'F'],
series: [8, 19, 24, 37, 12]
}, {
distributeSeries: true
});
new Chartist.Line('#chart2', {
labels: ['M', 'T', 'W', 'T', 'F'],
series: [
[12, 9, 7, 8, 5]
]
}, {
plugins: [
Chartist.plugins.ctPointLabels({
textAnchor: 'middle'
})
]
});
</script>
<script>
(function(window, document, Chartist) {
'use strict';
var defaultOptions = {
labelClass: 'ct-label',
labelOffset: {
x: 0,
y: -10
},
textAnchor: 'middle',
labelInterpolationFnc: Chartist.noop
};
Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctPointLabels = function(options) {
options = Chartist.extend({}, defaultOptions, options);
return function ctPointLabels(chart) {
if(chart instanceof Chartist.Line) {
chart.on('draw', function(data) {
if(data.type === 'point') {
data.group.elem('text', {
x: data.x + options.labelOffset.x,
y: data.y + options.labelOffset.y,
style: 'text-anchor: ' + options.textAnchor
}, options.labelClass).text(options.labelInterpolationFnc(data.value.x === undefined ? data.value.y : data.value.x + ', ' + data.value.y));
}
});
}
if(chart instanceof Chartist.Bar) {
chart.on('draw', function(data) {
if(data.type === 'bar') {
data.group.elem('text', {
x: data.x + options.labelOffset.x,
y: data.y + options.labelOffset.y,
style: 'text-anchor: ' + options.textAnchor
}, options.labelClass).text(options.labelInterpolationFnc(data.value.x === undefined ? data.value.y : data.value.x + ', ' + data.value.y));
}
});
}
};
};
}(window, document, Chartist));

Answer 1

There's a plugin to add labels to bar and column charts.
See here: https://github.com/YorkshireInteractive/chartist-bar-labels
I then borrowed the label position calculations from the following github comments:
https://github.com/gionkunz/chartist-js/issues/281
In short, I have the following in the ctBarLabels plugin options:
position: {
x: function(data) {
return data.x1 + (data.element.width() * .5);
},
y: function(data) {
return data.y1 + (data.element.height() * -1) - 10;
}
I can now style the labels with a stylesheet. I can also use functions to format the labels (for example, currency vs. the plain value).

Answer 2

Change your plugin code to :
if(chart instanceof Chartist.Bar) {
chart.on('draw', function(data) {
if(data.type === 'bar') {
data.group.elem('text', {
x: (data.x === undefined ? data.x1 : data.x ) + options.labelOffset.x,
y: (data.y === undefined ? data.y2 : data.y) + options.labelOffset.y,
style: 'text-anchor: ' + options.textAnchor
}, options.labelClass).text(options.labelInterpolationFnc(data.value.x === undefined ? data.value.y : data.value.x + ', ' + data.value.y));
}
});
}