# Align two axes "and" at the level of 0 in C3 js

0

I am trying to align the Y axes with respect to the value 0, example: link

I have temporarily solved it by putting a padding, but it is extremely sloppy and when re-dimensioning the graph or changing the data it is misplaced (unless the padding is re-calculated dynamically but not on how to calculate it, I I've put it to my eye)

I do NOT have the solution to put the same range in the 2 axes, since the grace of having 2 axes is to put different ranges ..

on that same page there are examples and the source (top menu).

Thanks

asked by Dracule 01.08.2016 в 19:01
source

1

In this reply to a question in English for a single axis, it is indicated to use a fragment that I have adapted in the following way:

``````// Seleccionar el eje X
d3.select(chart.element).select('.' + c3.chart.internal.fn.CLASS.axisX).transition()
// y traducir a la posición de Y = 0
.attr('transform', "translate(" + 0 + "," + chart.internal.y(0) + ")")
``````

As for the second axis, what you have to do is add at least a value proportionally equivalent to the minimum of the first. Here is an example:

``````// Calcular el mínimo de la parte negativa del segundo eje Y
var k = (-30 / 400 ) * 50;
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data1: 'y',
data2: 'y2'
}
},
axis: {
y: {
},
y2: {
show: true,
min: k,
}
}
});

// Seleccionar el eje X
d3.select(chart.element).select('.' + c3.chart.internal.fn.CLASS.axisX).transition()
// y traducir a la positición de Y = 0
.attr('transform', "translate(" + 0 + "," + chart.internal.y(0) + ")")``````
``````<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<div id="chart"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>``````