javascripthtmlcssc3.js

c3js tick width multiline=false not working


I'm trying to make left ticks in single line (like css norwap) but the multiline: false, as the official documentation suggests, doesn't work.

var graph = c3.generate({
    bindto: "#chart",
    data: {
        columns: [
            ["name1","5.00","3.00"],
            ["name2","3","2"]
        ],
        type : 'bar',
        colors : {
      "name1": "#00ff00",
      "name2": "#0000ff"
    },
    },
    bar: {
        width: 10
    },
    axis: {
        x: {
            type: 'category',
            categories: [
        "test looooooong string no multiline",
        "string 2"
      ]
    },
        rotated: true,
        tick: {
            multiline: false
    },
    },
    transition: {
        duration: 1000
    },
    padding: {
        bottom: 20
    },
    title: {
        text: 'titolo'
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="chart"></div>


Solution

  • It's not picking it up where it's declared. You need to move the tick>multiline declaration inside the axis>x declaration

    axis: {
        x: {
            tick: {
                multiline: false
            },
            type: 'category',
            categories: [
            "test looooooong string no multiline",
            "string 2"
          ]
        },
        rotated: true,
    }
        etc...