MacArmstrong
commented
6 years ago If there is only 2 categories the c3_axis_fn.getMaxTickWidth function only renders the first category label to calculate the maxWidth.
I believe this has to do with how the scales are calculated in the axis function nested in c3_axis_internal_fn.generateAxis.
Looks like the issue might be related to the c3_axis_internal_fn.copyScale function that shortens the scale's domain if isCategory.
Inside the axis function if I change the tick variable to use scale0 instead of scale1 it appears to fix the issue but I am not sure what other adverse effects this change may have. Hopefully someone with a better understanding of this code has a better solution.
Current:
tick = g.selectAll(".tick").data(ticks, scale1)
Updated:
tick = g.selectAll(".tick").data(ticks, scale0)
markpalfreeman
I have a rotated graph so that the category labels are displayed to the left of the chart. Multiline is set to false so that the labels are on a single line. If there is 3 or more categories, the space for labels are calculated correctly, however if there are only 2 categories only the first label's width is considered. If the second label is longer than the first label it will extend outside the svg area and become cutoff.
Demo on codepen: https://codepen.io/MacArmstrong/pen/paKBMg
var chart = c3.generate({ data: { columns: [ ['Values', 10, 20] ] }, axis: { rotated: true, x: { tick: { multiline: false }, type: 'category', categories: ['Normal Label', 'Longer Label Name'] } } });