Marker in BillboardJS on defocus

Question

When hovering over a line in billboardjs you can see a marker which follows the mouse (a tall vertical line). Is there a function for putting a marker on the x-line which can be used without triggering an automatic marker via onmousemove/hovering over data-points?

var chart = bb.generate({
  data: {
    columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
    ],
    type: "line", // for ESM specify as: line()
  },
  bindto: "#lineChart"
});

https://naver.github.io/billboard.js/demo/#Chart.LineChart

So to exemplify. I use an onclick (in the data object) in the chart which defocuses the view and I still want the marker to remain. So the code would look something like:

var chart = bb.generate({
  data: {
    columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
    ],
    type: "line", // for ESM specify as: line()
    onclick: function (d) {
        focusElsewhere()
        showMarker(d.x)
    }
  },
  bindto: "#lineChart"
});

So the question is if there is a function for this, or an obvious fix?

I have looked through https://naver.github.io/billboard.js/release/latest/doc/Chart.html but I may of course have missed something.

score 1 · Answer 1 · answered Apr 29 '21 at 11:22

I found that using xgrids did the trick. I don't think that the documentation gives a good example of how to use it. But basically you can use the "value" field to give which point the line should be on and add a class to show different kinds of lines.

var chart = bb.generate({
  data: {
    columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
    ],
    type: "line", // for ESM specify as: line()
    onclick: function (d) {
        focusElsewhere()
        this.xgrids.add({ value: d.x, class: "hover-line" }); //showMarker(d.x)
    }
  },
  bindto: "#lineChart"
});

To remove the line or reset the billboard for continued use so to say, you can use xgrids․remove({}) and add an object with some parameters of what kind of lines you want to remove.

Marker in BillboardJS on defocus

1 Answers1