Chart doesn't seem to have a final vertical grid line

[juzzbott]

I don't seem to have a right hand border on my chart.

I've created my chart like so: new Chartist.Bar('#training-overview-chart', {labels: ["General","General rescue","Road rescue","Land search","Rescue boat","Chainsaws","Storm & water","Communications","Other"],series: [1,1,2,0,1,0,1,0,1]}, { distributeSeries: true, axisY: { onlyInteger: true }, axisX: { scaleMinSpace: 5 } });

It doesn't seem to be width related, as changing the width of the chart just changes the size of the chart, but no bar is visible. Looking at the SVG data, there is no element for this end grid.

[powerbuoy]

I noticed the same thing with ChartJS. Perhaps it's some sort of standard? Not to show the last border I mean.

[masmediaspace]

This would be great to have in a new version.

[damianprzygodzki]

Perhaps it's some sort of standard?

If so, we shouldn't display last value also - but Chartist shows.

[bonjour81]

same issue for me (with lines)

[ariellevitsky]

It is a standard. I would love for it to be optional in future versions.

It looks particularly jarring if you increase the width or opacity of the lines.

[bonjour81]

Do you mean it's expected ? Because, when looking in the examples: https://gionkunz.github.io/chartist-js/examples.html

If you check "Line chart with area", the last vertical line is missing...unless you add in the option, fullwidth: true,

new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7, 8],
  series: [
    [5, 9, 7, 8, 5, 3, 5, 4]
  ]
}, {
  fullWidth: true,
  low: 0,
  showArea: true
});

Then, the empty area above 8 on x axis disappear and.....the last grid line appear !

[BojidarStanchev]

Any updates on this? I understand this may be a standard, but from a design point of view, the chart looks incomplete.

[sventschui]

As a workaround one can add fullWidth: true as mentioned by @bonjour81 above and then add a spare, empty label at the end

[MuzaffarMahmood]

As a workaround one can add fullWidth: true as mentioned by @bonjour81 above and then add a spare, empty label at the end

I did same but not working on my bar chart.

[xdrive05]

Came across this issue today so I wrote a quick plugin to add that missing end line back in. (function (window, document, Chartist) { 'use strict'; Chartist.plugins = Chartist.plugins || {}; Chartist.plugins.addMissingGridLine = function () { return function addMissingGridLine(chart) { chart.on('created', function() { var $chart = chart.container; var $grid = $chart.querySelector('.ct-grids'); var $line = document.createElementNS('http://www.w3.org/2000/svg','line'); var bottomLine=$grid.querySelector('.ct-vertical'); var topLine=$grid.querySelector('.ct-vertical:last-child'); $line.classList.add('ct-grid'); $line.classList.add('ct-horizontal'); $line.setAttribute('x1',bottomLine.getAttribute('x2')); $line.setAttribute('x2',bottomLine.getAttribute('x2')); $line.setAttribute('y1',topLine.getAttribute('y1')); $line.setAttribute('y2',bottomLine.getAttribute('y1')); $grid.appendChild($line); }); } } } (window, document, Chartist));