Chartist.js remove labels?

Question

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?

enter image description here

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;
}

score 29 · Answer 1 · answered Apr 28 '15 at 19:00

29

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

answered Apr 28 '15 at 19:00

gkunz

1,375
10
7

FYI, the full list of options https://gionkunz.github.io/chartist-js/api-documentation.html#chartistline-declaration-defaultoptions – Dale Zak Jun 13 '16 at 18:06
@DaleZak It guess owner of the answer is also the writer of the library. – atilkan Oct 05 '18 at 13:23

score 0 · Answer 2 · answered Apr 08 '15 at 19:45

0

Yes, those are svg elements with x and y value offsets. See in the example here http://gionkunz.github.io/chartist-js/examples.html the elements in < g class="ct-labels">< /g> all have an x and y offset defined that move them away from the parent element. It would be pretty simple to override these values with d3 after the chart has loaded.

answered Apr 08 '15 at 19:45

kq7354

1

Oh okay, I don't know much about svg, I am trying to follow the docs, and it does make it easy but without much svg knowledge its tough, this definitely helps. Thanks – Michael Joseph Aubry Apr 08 '15 at 19:50

SemanticZen · Answer 3 · 2019-01-23T20:18:57.863

-1

When I load the chart I like to check the chart width and the number of labels and if need be I either display the labels, only display every other label, or hide all the labels based on whether the labels fit. This code hides the labels:

setTimeout(function() {
    $('.ct-chart').find('.ct-labels .ct-horizontal').remove();
}, 100);

edited Jan 23 '19 at 20:18

answered Nov 15 '15 at 00:14

SemanticZen

1,141
14
21

Chartist.js remove labels?

3 Answers3