Search code examples
d3.jsplotlyplotly.js

Plotly.js, show tooltips outside of chart container


I need to implement a plotly.js chart on a page with a very restricted width. As a result, a tooltip is partially cut. Is it possible to cause tooltip not to be limited by plotly.js container size?

enter image description here

My code example at codepen: https://codepen.io/anatoly314/pen/gOavXzZ?editors=1111

//my single trace defined as following but it's better to see example at codepen
const yValue1 = [1000];
const trace1 = {
        x: [1],
        y: yValue1,
        name: `Model 1`,
        text: yValue1.map(value => Math.abs(value)),
        type: 'bar',
        textposition: 'outside'
      };

Solution

  • It is, by design, not possible for any part of the chart to overflow its container.