So I can display:none
the labels ex. below with css, but my .ct-chart still has something on the left and bottom side of the chart ex. image below.
.ct-labels, .ct-grids {
display: none;
}
Ideally the blue chart is over to the left of the white module and down on the bottom, so that it matches with the div, it is positioned absolute, and the chart responsiveness is on. I am assuming the white space is created from the labels still existing in the DOM?
I would like to have the chart showing no white space on the left and bottom side. My .ct-chart
css looks like this.
.ct-chart {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
padding: 0;
z-index: -1;
}
If you don't want to have labels at all, no grid lines and remove all offsets and padding you can do so but it requires quite a bit of configuration:
var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
http://jsbin.com/patela/1/edit?html,css,js,output
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With