Chartist-js: Problem with the last label on the X-axis

[novikov-an]

Merry Christmas for everyone)

I've got a some problem with last label on the X-axis:

How can i put it to the one line? Bcs there is a lot of space there.

[gionkunz]

Happy new Year! :-) What browser are you using? Can you post your chart config?

[novikov-an]

Happy new Year too! :-)

What browser are you using?

• Google Chrome. In all browsers it displays the same

Can you post your chart config?

  var options = {
          fullWidth: true,
          chartPadding: { right: 100 },
          lineSmooth: Chartist.Interpolation.cardinal({ fillHoles: true }),
          height: self.table_height,
          showArea: true,
          axisX: { offset: 60 },
          axisY: { 
                offset: 80,
                labelInterpolationFnc: function(value) {
                  var new_value = value;
                  if(lang['system_currency_position'] == 'before') {
                    return self.shortPrice(lang['sys_currency'] + " " +new_value);
                  } else {
                    return self.shortPrice(new_value + " " +lang['sys_currency']);
                  }
                } 
          }
        }

[gionkunz]

Yeah, that's a problem of the fullWidth option and the Axis class that wont use the available chart padding to calculate the width of the last label. We should fix that on the axis. I'll flag your issue as a bug.

[gionkunz]

For now you have a few options:

• Don't use fullWidth
• Remove the last label
• Use the style .ct-label.ct-horizontal { white-space: nowrap;} on your labels
• Force the chart to fallback to SVG text instead of foreignObjects, which will cause all labels in your chart to be drawn with elements. This will cause your text elements not to wrap, if you can forgo this feature. Check this bin for an example: http://jsbin.com/nepixe/edit?js,output

[sbaechler]

What is the best way to remove or hide the last label?

[gionkunz]

The easiest way is to set your last label to an empty string. If you want to implement this more like a plugin, you can use the draw event to remove the last label on the X axis:

var data = {
  labels: [1, 2, 3],
  series: [[1, 2, 3]]
};

Chartist.Line('#chart', data, {
  fullWidth: true
}).on('draw', function(context) {
  if (context.type === 'label' && 
      context.axis.units.pos === 'x' &&
      context.index === data.labels.length - 1) {
    context.element.remove();
  }
});

[sbaechler]

Great, thank you. I'm already listening on the draw event to add labels to the lines so I can hook in there.

[gionkunz]

We need to consider this when working on #809

[andrewdbate]

How do you do this for a bar chart on the x-axis?

In that case we cannot write context.index === data.labels.length - 1 since the last position is not given by data.labels.length - 1. Any help would be much appreciated!

[nathanaelphilip]

In case someone else needs this:

if (context.type === 'label') {
   let labelCount = context.axis.ticks.length
    if ((context.index + 1) === labelCount) {
       context.element._node.childNodes[0].classList.add('the-last-of-the-labels')
   }
}

That’ll add a class to the last label, which you can use to position it via CSS

[Anoxy]

small modification to @nathanaelphilip answer did the trick for me

        if (data.type === 'label') {
            let labelCount = data.axis.ticks.length
            if ((data.index + 1) === labelCount) {
                data.width = labelWidth;
                data.element._node.childNodes[0].style.width = labelWidth + "px";
            } else{
                labelWidth = data.width;
            }
         }

[ludenslabs]

Additionally; to hide any label on the Y-axis that is shown above the chart field you can use this:

var data = {
    labels: [1, 2, 3],
    series: [[1, 2, 3]]
};

Chartist.Line('#chart', data, {
    fullWidth: true
}).on('draw', function(context) {
     if (context.type === 'label' && context.y < 0 ) {
         context.element.remove();
     }
});

[harry-hathorn]

The best solution to this problem is just to add a css style to your svg:

this.chart.on('created', function() {
      document
        .getElementsByClassName('ct-chart-line')[0]
        .setAttribute('style', 'overflow: visible !important;');
    });