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>
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...