CODEWITHSUNDEEP
javascriptcsschartist.js
Stefan
Stefan

Reputation: 1307

Control spacing around stacked bars with chartist.js

I am drawing a horizontal stackedbar diagram. I want to control the space above and below each bar. You can specify the height of each bar itself by using:

.ct-bar{
    stroke-width: 30px;
}

However, chartist seems to determine the space around each stack based on the height you specified for the entire graph. Instead I want to specify the height around each stack and let the height of the chart grow based on the number of bars to draw.

I've looked at the API/documentation of chartist but I cannot find the setting i am looking for. I've also tried to not set the height for the graph but then chartist would just use the full height available and still space out the bars based on the available height.

Is there a way to control the spacing around bars (not the bar width itself?).

EDIT: An example of what I am trying to do is this: https://gionkunz.github.io/chartist-js/examples.html#stacked-bar In that stacked bar diagram you see Q1, Q2, Q3, etc. I want to control the amount of space that each of these takes up rather than having it auto determined by chartist.

Upvotes: 0

Views: 1419

Answers (1)

Folashade
Folashade

Reputation: 51

So without the code I just worked off the horizontal bar code example on the Examples section of the site.

The lines are svgs that are created as rectangles with x & y attributes specified

<line y1="29.0892857142857" y2="29.0892857142857" x1="80" x2="289.1640625" class="ct-bar" value="5"></line>

So if you want to adjust it after it's already been calculated with the framework you could use a CSS translate function. Here I adjust just series B so that the 1st set of horizontal bars remain unchanged. 

.ct-series-b .ct-bar {
    transform: translateY(-4px);
}

Here's some documentation on MDN for CSS3 transform: translate.

Upvotes: 1

Related Questions