BillboardJS Line Connection

Question

I have a question about billboard.js chart library. I'm using it with PHP, encoding data from Postgres DB with JSON. There's no problem with it. But... there is a problem with line connection/dot merging (sorry for my English). I need to connect lines like on the screen, how can I do that? Maybe this is a problem with vertical/horizontal chart?

<script>
var yArray = JSON.parse('<?php echo json_encode($yArray); ?>');
var pressureArray = JSON.parse('<?php echo json_encode($pressureArray); ?>');
var chart = bb.generate({
  data: {
    json: {
        data1: yArray,
        x1: pressureArray,
    },
    xs: {
      data1: "x1",
    },
    type: "line", // for ESM specify as: line()
  },
  line: {
    point: false,
  },
  axis: {
    y: {
        inverted: true
    },
  },
  bindto: "#multipleXYLineChart",
});
</script>

Chart's screen

score 0 · Answer 1 · answered Jan 20 '21 at 00:22

The data representation, should be based on the left to right direction. It means, it can't draw the line where already at the right position and going back to the left position.

Rotated axis can make to draw as you want, but in that case tooltip won't behave as normal way.

axis: {
   rotated: true
}

There's similar question that to take as reference:

https://github.com/naver/billboard.js/issues/1726

BillboardJS Line Connection

1 Answers1