Chartist-js: Centre-align labels on the x-axis

[callumacrae]

This graph looks silly:

The labels are too far right!

I couldn't find a way to line up the centre of the labels with the point. Is there a way to do this? If not, how tricky would it be to implement? It would be a good feature to have.

[gionkunz]

Hi there!

That's an easy one :smiley:

:heart: the standard :smile:

Just use the SVG CSS property for the x-axis labels text-anchor: middle

Cheers
Gion

[callumacrae]

That's much better! Awesome :)

Now there's a big gap to the right of the graph; can that be fixed? Or will that become less of an issue when I get more data points?

[gionkunz]

It will be less of an issue with a lot of data points. There is an open issue that deserves some attention for this problem #18 and I think this should be be configurable. It's space reserved for the labels with the standard and simple design but I guess making this configurable wouldn't hurt.

Cheers
Gion

[callumacrae]

Thanks!

[kevincaradant]

Hi there,

I'm a noob on SVG and i need your help :).
You wrote "Just use the SVG CSS property for the x-axis labels text-anchor: middle".
I think that i have the same problem but i do not understand what you mean.

Could you be more specific and give me a snippet :) ?

Cheers !

( I want the letters on the same axis of bar )

[gionkunz]

This can't be solved with the basic labels of chartist. The problem is that the bar chart draws the bars in the middle between the current and the next grid line. The label is positioned at the axis grid line and using text-anchor will just help you to position it around this specific point. You could use the new event feature of chartist to replace the generated labels or offset them. Here is a JSBin :-) --> http://jsbin.com/damiki/1/edit

[kevincaradant]

It's perfect . I just downloaded the last version of chartistjs in order to success to work your event 'draw' :)

Keep Going . Thank You for your Great Job

[fluffabelle]

I am having an issue with this also. I implemented the code referenced in the JSbin but it appears that the starting point is different for each of my labels, and therefore the "(data.x + data.space) / 2" is not working. Does anyone know how to correct this? It is a problem in both Safari and IE 10. Here is a fiddle with my code: [link removed] Any help is much appreciated!!!

[gionkunz]

This should no longer be an issue as you can use the fullWidth option on line charts.

[fluffabelle]

My fiddle is not for a line chart, I do not think the width is the issue, but I have added it here to test: [link removed] With the fullWidth in place it only displays one bar chart on safari and chrome, and IE has a horizontal scrollbar with labels still very off place. Are you able to look at this in IE (version/s 9, 10, or 11)? That is where the issue is. It does look better in Safari 8, I think my work computer is Safari 6 (I cannot update it due to restrictions). If you could see it in IE I think you would better see the problem, if not I can post a screenshot.

[gionkunz]

I'll be able to look at this in older browsers but for a better understanding it would be nice anyway to have some screenshorts.

[fluffabelle]

edit: I had to remove the screenshots

This issue seems to be specific to browsers using the "text" XML node versus the foreignObject/span nodes. While Safari 6 is outdated, IE 11 is the current standard and looks the same as IE 9 & 10. I am hoping this is an easy fix... I do think that correcting the logic for the "text" node XML will correct it on all of these browsers.

[gionkunz]

Hey Christina. This issue is fairly old and some things have changed also in the API. Unfortunately even IE11 does not support foreignObject while all other modern browsers do :cry: You can also see this from the Chartist browser compatibility list: http://gionkunz.github.io/chartist-js/#browser-compatibility

You should definitely update to the latest Chartist version 0.7.2 since you're still running with version 0.5 :scream_cat:

For modern browsers that do support the extensibility specification of SVG (actually the foreignObjects), you can simply use CSS to center your span labels as they have the full segment width. This will work just fine:

.ct-chart .ct-label.ct-horizontal {
  text-align: center;
}

You could then implement a fallback for non-supportive browsers and use the text anchor and position offset like this:

var chart = new Chartist.Bar('.ct-chart', {
  labels: ['Test', 'Long test', 'Very long test'],
  series: [[1, 5, 3]]
});

// Uncomment this line to test rendering without foreign objects
//chart.supportsForeignObject = false;

chart.on('draw', function(event) {
  // If the draw event is for labels on the x-axis
  if(event.type === 'label' && event.axis.units.pos === 'x') {
    // If foreign object is NOT supported, we need to fallback to text-anchor and event.width / 2 offset.
    if(!chart.supportsForeignObject) {
      event.element.attr({
        x: event.x + event.width / 2,
        'text-anchor': 'middle'
      });
    }
  }
});

Check this example on JSBin: http://jsbin.com/pujoxe/1/edit?css,js,output

[gionkunz]

Also a side note while looking at your code. For static offset like the one for your Y-Axis label you best use the axisY.labelOffset.x configuration property.

[fluffabelle]

Gion, thank you so much for your quick reply. I see that your jsbin is working in IE, and I appreciate being able to see how to use the "text-anchor" correctly. You are right, I do need to update my chartist as your fallback draw snippet is not working with 0.5.0. When I updated it to 0.7.2, a few of my other charts got messed up and unfortunately I am in the midst of a job wildfire and can't trouble-shoot it this time around. I will try this approach with the next set of charts that I create. Also thank you for the tip about the axisY.labelOffset.x property, I am definitely still learning this library :) Thanks again for helping me with this!!

[whatcould]

For reference, I was able to center labels in a line chart by using the event code gionkunz posted in the JSBin, but it took me forever to get the text to center in the elements. I had to set text-align: center; display: inline-block; in the CSS. Not sure why it appears to work fine in that JSBin, but in my graph the text within the spans wouldn't center without the inline-block:

[unhinged]

I'm working on 0.9.4 and was having trouble getting this to work. text-anchor: middle had no effect on my chart. I ended up using.

.ct-label.ct-horizontal.ct-end {
    transform: translate(-50%,0);
    display: block;
    text-align: center;
}

Make sure you properly browser prefix transform to work in iOS (-webkit-transform).

[IWantPizza]

I've been trying to achieve the same thing as the OP, but the only thing that worked for me was the most recent suggestion by @unhinged , the problem with that is that the axis do not scale/move when the browser zoom function is used. I tried changing both the text-anchor properties for horizontal labels in the chartist scss and recompiling but nothing seemed to change. Is there any way to achieve this and retain zoom scaling? Thanks

[ariellevitsky]

The text-anchor property had no effect. Even when I edited the existing text-anchor property in inspector, it had no effect on the graph.

After fiddling around in inspector I figured out that a combination of display: block, text-align center did the trick as unhinged suggested.

[bonjour81]

Hi!
Same for me...
text-anchor does not change anything, while the suggestion from @unhinged works!

[eliasleyton]

.ct-label.ct-horizontal.ct-end {
    display: block;
    text-align: center;
}

[blaney83]

I used a combination of bar and line charts to display some information. Mobile responsiveness was a priority for me when I was designing the charts, so I ended up rotating the labels 45 degrees to improve readability on smaller screens:

.ct-label.ct-label.ct-horizontal.ct-end {
  position: relative;
  justify-content: flex-end;
  text-align: center;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  white-space:nowrap;
}

However, I also wanted to center the _bar_ chart labels under the bars and keep the _line_ chart labels centered under the vertical hash marks of the graph. This is how I did that:

.ct-chart-bar > .ct-labels > foreignObject >.ct-label.ct-horizontal.ct-end {
  left: calc(100% / 2);
}

[AlanKrygowski]

Not sure how many people will find this helpful but instead of removing labels I've tried adding an empty one to the end of the labels list. That way the last label that gets stretched is invisible.

 labels: [...Object.keys(lbs), ''],