EVOLUTION-MANAGER

Edit File: chartist-plugin-barhlabels.min.js

Chartist.plugins = Chartist.plugins || {};
Chartist.plugins.ctBarLabels = function (options) {

options = Chartist.extend({}, {}, options);

return function ctBarLabels(chart) {
      if (chart instanceof Chartist.Bar) {
        chart.on('draw', function (data) {
    if (data.type === "bar") {
        var label, labelText, barLength, labelWidth, barClasses,
            barWidth = 40,
            barHorizontalCenter = (data.x1 + (data.element.width() * .5)),
            barVerticalCenter =  (data.y1 + (barWidth * .12)),
            classLabelMap = {
                cardinal: "Scared",
                flamingo: "Confused",
                sunglow: "Indifferent",
                pistachio: "Confident",
                grass: "Secure"
            };

// set the width of the bar
        data.element.attr({
            style: "stroke-width: " + barWidth + "px"
        });

// need to grab the CSS classes that were applied to the bar
        barClasses = data.element.parent().classes();
        // typically each bar gets two classes, ct-series and ct-series-<color>
        // (cardinal, flamingo, etc)
        barClasses.forEach(className => {
            // eliminate the basic series class...we can't do anything with that
            var color = className.replace("ct-series", "");
            // once that is stripped off, if there's anything left, then we have
            // the class that specifies the color of the bar...
            if (color.length) {
                // strip off the remaining leading dash
                color = color.substr(1, color.length);
                // use the color class to map to the text we want to display in
                // the custom label for the bar
                labelText = classLabelMap[color];
            }
        });

// add the custom label text as an attribute to the bar for use by a tooltip
        data.element.attr({ label: labelText }, "ct:series");

// create a custom label element to insert into the bar
        label = new Chartist.Svg("text");
        label.text(labelText);
        label.attr({
            x: barHorizontalCenter,
            y: barVerticalCenter,
            "text-anchor": "middle",
            style: "font-family: 'proxima-nova-alt', Helvetica, Arial, sans-serif; font-size: 12px; fill: white"
        });

// add the new custom text label to the bar
        data.group.append(label);

// only *now* that its been added to the bar and written to the DOM
        // can we measure it to see if it actually fits in the bar
        barLength = data.element.width(); // get the width of the bar itself
        labelWidth = label._node.clientWidth; // now get the width of the custom label
        // if the padded width of the label is larger than the bar...
        if ((labelWidth + 20) >= barLength) {
            // don't show it
            label.remove();
        }
    }
        });
      }
    };
  };