Menu
Is it possible to define values for the X-axis values in a C3.js chart that also has multiple y values?
I am trying to create a mixed bar- and line- chart with two y-axes and custom labels for the x-axis.
The result should be something like this:
desired-output
I have referred to the C3.js examples to guide my attempts: c3js.org/samples/axes_y2.html and c3js.org/samples/axes_x_tick_values.html I am able to produce the mixed line and bar chart with 2 y-axes. When I add the in labels to the x-axis, however, I lose the second y axis:
I can get the chart to show 2 y-axes:
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
columns: [
['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
],
axes: {
'total budget': 'y2'
},
types: {
'open cases': 'bar' // ADD
}
},
axis: {
y: {
label: {
text: 'open cases',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'total budget',
position: 'outer-middle'
}
}
}
});
</script>
</body>
</html>
... but once I try to add labels for x-axis, the second y axis disappears:
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
columns: [
['x', 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
['open cases', 0, 7, 10, 12, 14, 19, 12, 17, 19, 18, 23, 24, 33, 42, 54, 63, 52, 51],
['total budget', 0, 1359300, 1700900, 2248200, 2417400, 2966846, 2966846, 2658700, 3009082, 3919996, 4212200, 4319972, 4882937, 5026751, 5671243, 5059538, 5896239, 6289674]
],
axes: {
'total budget': 'y2'
},
types: {
'open cases': 'bar' // ADD
}
},
axis: {
y: {
label: {
text: 'open cases',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'total budget',
position: 'outer-middle'
}
}
},
axis: {
x: {
type: 'timeseries',
tick: {
values: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]
},
}
}
});
</script>
</body>
</html>
https://jsfiddle.net/qvsdvh8w/3/
Am I doing something wrong, or is this a limitation of C3.js? Thanks in advance for sharing your knowledge and insights!
315
asked Oct 19 '25 06:10
Just a trivial syntax error you'll kick yourself for ;-)
You've declared axis twice in the configuration above
Instead, put the x axis declaration in the axis property alongside the y axes
axis: {
y: {
label: {
text: 'open cases',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'total budget',
position: 'outer-middle'
}
}
},
x: {
type: 'timeseries',
tick: {
values: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]
},
}
}
https://jsfiddle.net/qvsdvh8w/4/
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
