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

Question

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

Navigation

#1 by (1 votes)

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

Official documentation: link

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

Thanks

javascript d3.js c3.js

asked by Dracule 01.08.2016 в 19:01

source

1 answer

Problem with Java events cell image is resized when loading TableView

score 1 · Answer 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>