1

The chart contains data positioned with respect to two Y-axes, y and y2.

This is how it looks like:

enter image description here

So, the red line is generated with one y-axis and the bars with the other.

The value of the red line is always positive in this case (the value is 13.91 but the line looks like it is around -5) but because the axes are not aligned it doesn't look well.

The code doing it:

const chartDataConfig = {
    data: {
        columns: series.columns,
    },
    ...
    axis: {
        x: {
            label: {
                text: context.labels.xLabel,
            },
        },
        y: {
            label: {
                text: context.labels.yLabel,
            },
        },
        y2: {
            label: {
                text: context.labels.y2Label,
            },
        },
    },
    ...
};

and

function getDefaultConfig() {
    return {
        data: {
            x: "x",
        },
        ...
        axis: {
            x: {
                ...
            },
            y: {
                label: {
                    position: "outer-middle"
                },
            },
            y2: {
                show: true,
                label: {
                    position: "outer-middle"
                },
            },
        },
        bindto: "#my-chart"
    };
}

Is there any way to align these two axes in order to start from same point?

Samurai Jack
  • 2,985
  • 8
  • 35
  • 58

1 Answers1

1

I'm not sure about "align" in your case, but if you need to make y and y2 axes have same scale view, set same min and max axis value.

Check out the example.

var chart = bb.generate({
 data: {
  columns: [
   ["data1", 30, 20, -5, 40, 15, 25],
   ["data2", 3, 10, 20, 10, 25, 15]
  ],
  colors: {
   data2: "red"
  },
  types: {
   data1: "bar"
  },
  axes: {
   data1: "y",
   data2: "y2"
  }
 },
 axis: {
  y: {
   min: -10,
          max: 35
      },
  y2: {
   min: -10,
   max: 35,
   show: true
      }
 }
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
    <title>billboard.js</title>
</head>
<body>
  <div id="chart"></div>
</body>
</html>
Jae Sung Park
  • 900
  • 6
  • 9
  • I think he wants to get the y and y2 axis have the 0 point of both axes horizontally aligned, without trying to get the same scale view and/or same max values. Also, having y and y2 axes with same scale,min,max, doesn't this defeat the purpose of having two axes ? – knee pain Feb 21 '18 at 08:12
  • @bgiuga, well in that case just setting same `min` value for both axes will fulfill the needs. But, as I indicated in the beginning, I don't know the exact purpose of the needs. – Jae Sung Park Feb 21 '18 at 08:31
  • @JaeSungPark just setting the min appears insufficient if the two Y axes have different scales (as would be common). Matching the min just means the bottom of the graph starts at the same number but the "0" position will not line up between the two. This makes for some confusing visuals any time there are series with both positive and negative numbers but different scales. It would be nice to have a way to align the zero positions of the y axes, but I understand it's probably not a very common request. – totalhack Apr 03 '21 at 16:06