I'm trying to rotate the axis ticks along the bottom of the chart. I can rotate the x-axis ticks just fine but once I rotate the axis itself then the axis along the bottom is technically considered the y-axis and I can no longer rotate the ticks.
I want bars going across from left to right and I want the ticks along the bottom to be tilted.
Any help would be appreciated.
var day1 = new Date();
day1.setDate(day1.getDate() - 7);
var day2 = new Date();
day2.setDate(day2.getDate() - 6);
var day3 = new Date();
day3.setDate(day3.getDate() - 5);
var day4 = new Date();
day4.setDate(day4.getDate() - 4);
var day5 = new Date();
day5.setDate(day5.getDate() - 3);
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', day1, day2, day3, day4, day5],
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%m-%d',
rotate: 75
}
},
y: {
tick: {
rotate: 75
}
}
}
});
Hmm. You'd probably have to manually position the x-ticks yourself, using D3.
Something like in the example.
var day1 = new Date();
day1.setDate(day1.getDate() - 7);
var day2 = new Date();
day2.setDate(day2.getDate() - 6);
var day3 = new Date();
day3.setDate(day3.getDate() - 5);
var day4 = new Date();
day4.setDate(day4.getDate() - 4);
var day5 = new Date();
day5.setDate(day5.getDate() - 3);
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', day1, day2, day3, day4, day5],
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: '%m-%d',
rotate: 75
}
},
y: {
tick: {
rotate: 75
}
}
}
});
$("button").click(function(){
d3.selectAll(".c3-axis-y text").attr("transform", "rotate(75)").attr("y", -1).attr("x", 0).style("text-anchor", "start").style("display", "block");
d3.selectAll(".c3-axis-y tspan").attr("x", 0).attr("dy", ".71em").attr("dx", 7.72)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<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/d3/3.4.11/d3.min.js"></script>
<button>Reposition</button>
<div id='chart' />