Multiple category axis labels collapse to one line when negative values are present in a column chart

2 posts, 0 answers
  1. Hughes
    Hughes avatar
    2 posts
    Member since:
    Jun 2011

    Posted 08 Aug 2013 Link to this post

    When there are multiple category axes and negative values are present on a column chart, the axis labels collapse down to one line rather than being stacked as normal.  For example:

    seriesDefaults: {
    type: "column"
    series: [{
    name: "Sales",
    data: [10, 20, -0.5, 0, 100, 0],
    valueAxis: [{
    majorGridLines: { visible: false },
    title: { text: "Sales" },
    categoryAxis: [{
    categories: ["Order", "Invoice", "Credit Memo", "Order", "Invoice", "Credit Memo"],
    majorGridLines: { visible: false },
    }, {
    categories: ["Item", "Resources"],
    line: { visible: false },
    majorGridLines: { visible: false },
    title: { text: "Type & Document Type" },

    Note that the 2 category axes labels simply collapse on top of one another with the words "Item" and "Invoice" on top of one another and the words "Resources" and "Invoice" on top of one another.  If I change the 3rd value in the series data from -0.5 to just 0.5, then the problem goes away and the 2 category axes are displayed correctly, one above the other.

    This behavior seems like a bug since the axes are displayed correctly when the chart contains just positive values, but not if a negative value is present.  Is there some setting I'm missing?

  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Aug 2013 Link to this post

    Hello Hughes,

    The observed behavior in by design, however you could change the point of interception between axes using axisCrossingValue configuration options. For your convenience I prepared a simple jsBin example
    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top