Space for long labels in Chartist

Question

I'm building a small application in Framework7, using Chartist for doing some graphs. As an example, I've created a jsfiddle of this. You can see it here: https://jsfiddle.net/emergingdzns/hpr6u8uk/1/

The problem (as you can see in the example) is that the long labels on the vertical bars get cut off. Any way to fix that?

Here's the javascript:

// Initialize your app
var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;

var dataChart1 = [
  26400,
  50500,
  73200,
  101100
];

new Chartist.Bar('#coveredChart', {
  labels: ['1. Everyone has to have health insurance.',
    '2. People can choose to have - or not have - health insurance.',
    '3. People with pre-existing conditions are excluded.',
    '4. Of those with health insurance, one becomes ill.'
  ],
  series: [dataChart1]
});

Here's the HTML:

<div class="views">
  <!-- Your main view, should have "view-main" class-->
  <div class="view view-main">
    <!-- Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
        <!-- We have home navbar without left link-->
        <div class="center sliding">ClareFolio</div>
      </div>
    </div>
    <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
    <div class="pages">
      <!-- Page, data-page contains page name-->
      <div data-page="covered" class="page">
        <!-- Scrollable page content-->
        <div class="page-content">
          <br>
          <div class="content-block-title" style="text-align:center;">Example chart below</div>
          <div class="content-block">
            <div class="content-block-inner">
              <div class="chart">
                <div id="coveredChart" class="ct-chart ct-golden-section"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

The idea with chartist, is that there is a separation of presentation and data, so all the chart elements are accessible through Css.

In you case, I would target either the chart container with something like this:

.ct-chart-bar{
 padding-bottom: 140px;
}

You might need to adjust it to work with your framework container and recalculate on resize, in either case the inspector is your best friend.

or if you want access to the labels :

 span.ct-label.ct-horizontal.ct-end {}

Additionally, from a UI/UX Data Visualization perspective, if your labels are that long, you almost certainly have a mistake in your presentation and are heading into chart junk territory. This is actually the easiest solution since all you have to do is add shorter labels, a title might also help.

Reading your data ( not sure if it is just dummy data), it doesn't really make sense to have those datasets in the same chart.