Wrong label position on Bar Charts

[ganar]

I could not make this work properly on barcharts.

This is my code:

new Chartist.Bar('#demo_03', {
  labels: ['Corea del Sur' ,'Noruega' ,'Luxemburgo' ,'Países Bajos' ,'Islandia' ,'Dinamarca' ,'Suecia' ,'Reino Unido' ,'Alemania' ,'Finlandia' ,'Suiza' ,'Irlanda' ,'Estonia' ,'Australia' ,'Francia' ,'Austria' ,'Bélgica' ,'Canadá', 'España' ,'Rep. Checa' ,'Eslovaquia' ,'Polonia' ,'Nva. Zelandia' ,'Hungría' ,'Italia' ,'Eslovenia' ,'Letonia' ,'Turquía' ,'Israel' ,'Portugal' ,'EEUU' ,'Lituania' ,'Chile' ,'Grecia' ,'Japón' ,'Costa Rica' ,'Brasil' ,'México' ,'Colombia' ],
  series: [
    [98.80 , 97.05 , 97.04 , 96.66 , 96.48 , 94.34 , 93.80 , 93.48 , 92.14 , 91.95 , 90.62 , 86.71 , 86.19 , 85.89 , 85.87 , 85.09 , 84.79 , 83.90, 81.93 , 81.65 , 80.52 , 80.45 , 80.00 , 79.18 , 78.51 , 78.42 , 77.34 , 76.34 , 74.29 , 74.05 , 73.37 , 71.75 , 71.56 , 69.13 , 67.10 , 64.84 , 49.20 , 47.02 , 41.80 ]
  ]
}, {
  plugins: [
    Chartist.plugins.ctPointLabels({
      textAnchor: 'left',
      align: 'center'
    }),
    Chartist.plugins.ctTargetLine({
      value: 83
    })
  ],
  chartPadding: {
    right: 32
  },
  axisY: {
    offset: 20,
  },
    axisX: {
    offset: 120,
  }

});

This is my result:

I tried with this changes in the code, to no avail.

Any pointers or help is appreciated

[gaenseklein]

if you want to have it on top (like i wanted) change in line 31 "data.y1" to "data.y2" and the same in line 37 and 43. it takes the wrong y-data if you want to have it displayed on top.

[matthewgillespie]

Experiencing the same issue.

@gaenseklein Can you provide more context? I don't see anything that has a line 31, 37, or 43.

[gaenseklein]

@matthewgillespie sure. sorry for not giving enough information.
line numbers are as in https://github.com/gionkunz/chartist-plugin-pointlabels/blob/master/src/scripts/chartist-plugin-pointlabels.js

in the function "labelPositionCalculation" there it defines several positions for bar-charts.
a quick-fix solution is to change there in the "left" position to use data.y2 instead of data.y1.
for myself i added positioning for "top" and "middle" in case i want to use them.
so my whole function looks now like this:

var labelPositionCalculation = {
      point: function(data) {
        return {
          x: data.x,
          y: data.y
        };
      },
      bar: {
        left: function(data) {
          return {
            x: data.x1,
            y: data.y1
          };
        },
        center: function(data) {
          return {
            x: data.x1 + (data.x2 - data.x1) / 2,
            y: data.y1
          };
        },
        right: function(data) {
          return {
            x: data.x2,
            y: data.y1
          };
        },
        top: function(data) {
          return {
            x: data.x1,
            y: data.y2
          };
        },
        middle: function(data) {
          return {
            x: data.x1,
            y: data.y1 + (data.y2 - data.y1)/2
          };
        }


      }
    };

and i would change the calling of the plugin to:

 Chartist.plugins.ctPointLabels({
      textAnchor: 'middle', //get it horizontal-wise middle of the bar
      align: 'top', //and verticaly on top of it
      labelOffset:{x:0,y:-2} //adding a little offset to get some space
    })

[gaenseklein]

oh, in case you are wondering: i am not the only person who came up with this solution, as there is already a pull request open with the exact same patch, so i did not open a second one:
3572168

[ganar]

@gaenseklein thank you for the thorough answer!

[brunosdecampos]

Thanks for the solution @gaenseklein. It didn't work for me though. Whenever I put align: 'top' inside Chartist.plugins.ctPointLabels it breaks the chart. Any ideas?

[luisFebro]

@matthewgillespie sure. sorry for not giving enough information.
line numbers are as in https://github.com/gionkunz/chartist-plugin-pointlabels/blob/master/src/scripts/chartist-plugin-pointlabels.js

in the function "labelPositionCalculation" there it defines several positions for bar-charts.
a quick-fix solution is to change there in the "left" position to use data.y2 instead of data.y1.
for myself i added positioning for "top" and "middle" in case i want to use them.
so my whole function looks now like this:

var labelPositionCalculation = {
      point: function(data) {
        return {
          x: data.x,
          y: data.y
        };
      },
      bar: {
        left: function(data) {
          return {
            x: data.x1,
            y: data.y1
          };
        },
        center: function(data) {
          return {
            x: data.x1 + (data.x2 - data.x1) / 2,
            y: data.y1
          };
        },
        right: function(data) {
          return {
            x: data.x2,
            y: data.y1
          };
        },
        top: function(data) {
          return {
            x: data.x1,
            y: data.y2
          };
        },
        middle: function(data) {
          return {
            x: data.x1,
            y: data.y1 + (data.y2 - data.y1)/2
          };
        }


      }
    };

and i would change the calling of the plugin to:

 Chartist.plugins.ctPointLabels({
      textAnchor: 'middle', //get it horizontal-wise middle of the bar
      align: 'top', //and verticaly on top of it
      labelOffset:{x:0,y:-2} //adding a little offset to get some space
    })

I tried you solution, but somehow it breaks the graph. Only one leftmost bar seems to appear and all the others are thrown away even in the DOM.

Any alternative to it?

[luisFebro]

As I suspected, there is a type error in the source code preventing the graph to load.

I copied and pasted the code and I could do the work after changing x1 and y1 to x2 and y2. I changed it because the code which worked for me so that I could insert a peak circle at the top of the bar and animate it was using x2 and y2.

I also changed the plugin default config to this:

Chartist.plugins.ctPointLabels({
            textAnchor: 'middle', //get it horizontal-wise middle of the bar
            labelOffset:{x:0,y:-10} //adding a little offset to get some space
 })

I removed the align: 'top' here since it triggers the function with type error.

Gladly it works as I aspected. Here it is my finished bar chart with proper labelings