When x tick count set, only show 2 ticks for categories

Dekai commented 8 years ago

When categories array is large, trying to show just show 10 of them by setting tick_count = 10, but only two ticks shows. Here are the jsfiddle: https://jsfiddle.net/Dekai/ysdaha7o/6/

Sample code Snippet: var dataCategories = ["01 Jan 2016", "02 Jan 2016", "03 Jan 2016", "04 Jan 2016", "05 Jan 2016", "06 Jan 2016", "07 Jan 2016", "08 Jan 2016", "09 Jan 2016", "10 Jan 2016", "11 Jan 2016", "12 Jan 2016", "13 Jan 2016", "14 Jan 2016", "15 Jan 2016", "16 Jan 2016", "17 Jan 2016", "18 Jan 2016", "19 Jan 2016", "20 Jan 2016", "21 Jan 2016", "22 Jan 2016", "23 Jan 2016", "24 Jan 2016", "25 Jan 2016", "26 Jan 2016", "27 Jan 2016", "28 Jan 2016", "29 Jan 2016", "30 Jan 2016", "31 Jan 2016", "01 Feb 2016", "02 Feb 2016", "03 Feb 2016", "04 Feb 2016", "05 Feb 2016", "06 Feb 2016", "07 Feb 2016", "08 Feb 2016", "09 Feb 2016", "10 Feb 2016", "11 Feb 2016", "12 Feb 2016", "13 Feb 2016", "14 Feb 2016", "15 Feb 2016", "31 Mar 2016"];

 axis: {
          x: {
            type: 'category',
            categories: dataCategories,
            tick: {
              count: 11
            }
          }
        }

Dekai commented 8 years ago

Found the issue, basically it caused by method Axis.prototype.generateTickValues and c3_chart_internal_fn.categoryName.

The tick value generated by Axis.prototype.generateTickValues, the decimal value passed in as index of array config.axis_x_categories[i], it can't get the categoryName, just return undefined.

 c3_chart_internal_fn.categoryName = function (i) {
        var config = this.config;
        return i < config.axis_x_categories.length ? config.axis_x_categories[i] : i;
    };

Fixing it by adding categoryIndex = Math.ceil(i);

c3.chart.internal.fn.categoryName = function (i) {
    var config = this.config, categoryIndex = Math.ceil(i);
    return i < config.axis_x_categories.length ? config.axis_x_categories[categoryIndex] : i;
};

If we fix it inside generateTickValues to generate integer tick value , it will cause splitTickText doesn't work properly. From: tickValues.push(forTimeSeries ? new Date(tickValue) : tickValue); To: tickValues.push(forTimeSeries ? new Date(tickValue) : $$.isCategorized() ? Math.ceil(tickValue): tickValue);

After code changes, it works in jsfiddles

aendra-rininsland commented 8 years ago

Definitely a bug, and the fix in #1641 definitely works. Waiting on @Dekai to move his changes out of c3.js into src/category.js in that PR.

c3js / c3

When x tick count set, only show 2 ticks for categories #1638