Point Labels are not being created about chartist-plugin-pointlabels

[dustinnulf]

Hi purplelady,

I have the same problem with the plugin. I stepped into the debugger and found an odd constructor name of 'e', which didn't jive with an expected 'line' or 'bar' name. Perhaps there is a mixup in using .min.js versus .js files. I didn't try to pin it down further.

HOWEVER... I looked at the plugins page again: https://gionkunz.github.io/chartist-js/plugins.html
Scrolling down to the very bottom of the 'example plugin' code, it appeared to be the Point Labels code that I wanted. Hey! Cool. So, instead of including the external plugin, copy/paste this code into your <script> section.

function ctPointLabels(options) {
    return function ctPointLabels(chart) {
        var defaultOptions = {
            labelClass: 'ct-label',
            labelOffset: {
                x: 0,
                y: -10
            },
            textAnchor: 'middle'
        };
        
        options = Chartist.extend({}, defaultOptions, options);

        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(data.value.y);  // 07.11.17 added ".y"
                }
            });
        }
    }
}

Now, in your plugins definitions of the Chartist options, call the local function instead of the external Chartist.plugins.ctPointLabels:

plugins: [

     ctPointLabels({
         textAnchor: 'middle'
     })

 ]

Run and test. It works on my graph! Let me know if that works for you.

-Dustin

[dustinnulf]

Solved?

[purplelady105]

@dustinnulf Nope, I am still unable to get the point labels working.

[purplelady105]

Thank you so much! That worked! You saved me a huge headache :) Thank you for also including the code that you used.

…

On Tue, Jul 11, 2017 at 8:28 PM, dustinnulf ***@***.***> wrote: Hi purplelady, I have the same problem with the plugin. I stepped into the debugger and found an odd constructor name of 'e', which didn't jive with an expected 'line' or 'bar' name. Perhaps there is a mixup in using .min.js versus .js files. I didn't try to pin it down further. HOWEVER... I looked at the plugins page again: https://gionkunz.github.io/ chartist-js/plugins.html <http://url> Scrolling down to the very bottom of the 'example plugin' code, it appeared to be the Point Labels code that I wanted. Hey! Cool. So, instead of including the external plugin, copy/paste this code into your <script> section. function ctPointLabels(options) { return function ctPointLabels(chart) { var defaultOptions = { labelClass: 'ct-label', labelOffset: { x: 0, y: -10 }, textAnchor: 'middle' }; options = Chartist.extend({}, defaultOptions, options); 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(data.value.y); // 07.11.17 added ".y" } }); } } } Now, in your plugins definitions of the Chartist options, call the local function instead of the external Chartist.plugins.ctPointLabels: plugins: [ ctPointLabels({ textAnchor: 'middle' }) ] Run and test. It works on my graph! Let me know if that works for you. -Dustin — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AbYqz5jK3dAJauNaVagSheOo0v4YRan7ks5sND1AgaJpZM4OOjne> .

-- *AllisonBroughton* *PurpleLady*