0

There are some way to set the position for the tooltip in c3js, because the tooltip is always at the right side of the vertical line, but when the cursor is on the last value then it changes position towards left side or state in the graph without leaving it.

I know that this is normal tooltip behavior on c3js but I want that the tooltip to keep its position on the right side for the last value

you can see the example on this link

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        }
    },
    axis: {
        y: {
            padding: {bottom: 0},
            min: 0
        },
        x: {
            padding: {left: 0},
            min: 0,
            show: false
        }
    }

});

any ideas?

1 Answer 1

5

You can set the tooltip position using this code:

http://c3js.org/reference.html#tooltip-position

tooltip: {
    position: function (data, width, height, element) {
      var top = d3.mouse(element)[1] + 15;
      return {top: top, left: parseInt(element.getAttribute('x')) + parseInt(element.getAttribute('width'))}
  }
}

However how it works when the tooltip pokes out the side of the chart I don't know, it may just be cutoff. You could add a margin of 100px to the right if needed I suppose but that makes your chart smaller.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.