c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.35k stars 1.39k forks source link

Tick for subchart #2626

Closed mpushki closed 2 years ago

mpushki commented 5 years ago

c3 0.7.1 d3 5.0.0

Tick opt has rotate = 35 and height = 170 Also i have subchart - but i want to hide tick for subchart. I found next solve:

.c3-axis-x:last-child .tick {
    visibility: hidden;
    display: none !important;
}

But then I have empty space at the bottom Screenshot from 2019-06-06 15-19-48

digEmAll commented 4 years ago

Using collapse instead of hidden should work, i.e. :

.c3-axis-x:last-child .tick {
  visibility: collapse;
  display: none !important;
}

BTW: I think the subchart should have different classes or at least a parent container class to differentiate the selectors.

digEmAll commented 4 years ago

I withdraw what I have said, the space remains also when you use visibility: collapse.

I second the request to be able to hide subchart axis ticks. Looking at the code, I discovered a property called subchart_axis_x_show that should do what we're asking, but it doesn't seem to work in the last version (0.7.18).

Here's an attached jsfiddle: https://jsfiddle.net/g06n2fsw/13/

IMHO, this feature is very useful because often the labels are very long and you just want to see them in the main chart.

At the very least, could it be possible to add some argument to the callbacks (e.g. the axis.tick.x.format), in order to distinguish if the call has been done while drawing the main chart or the sub-chart ?

Thanks a lot for your efforts on this library

digEmAll commented 4 years ago

Added a PR restoring (and documenting) the parameter subchart_axis_x_show.

Note that when subchart_axis_x_show = false, the x axis, the ticks and ticks labels are hidden. If you want to still show the x axis line, you can use this css :

/* make the x-axis line visible again */
.c3-axis-x:last-child {
    visibility: visible !important;
}

/* hide the ticks labels*/
.c3-axis-x:last-child .tick {
    visibility: hidden !important;
    display: none !important;
}