Highcharts tooltip overflow is hidden

后端 未结 6 959
[愿得一人]
[愿得一人] 2020-12-09 01:42

My problem is that when the chart drawing area of is smaller than a highchart tooltip, a part of the tooltip is hidden where it overflows the chart drawing area.

I w

6条回答
  •  眼角桃花
    2020-12-09 02:06

    A modern approach (Highcharts 6.1.1 and newer) is to simply use tooltip.outside (API):

    Whether to allow the tooltip to render outside the chart's SVG element box. By default (false), the tooltip is rendered within the chart's SVG element, which results in the tooltip being aligned inside the chart area. For small charts, this may result in clipping or overlapping. When true, a separate SVG element is created and overlaid on the page, allowing the tooltip to be aligned inside the page itself.

    Quite simply this means setting this one value to true, for example:

    Highcharts.chart('container', {
        // Your options...
        tooltip: {
            outside: true
        }
    });
    

    See this JSFiddle demonstration of how setting this value to true fixes space/clipping issues.

提交回复
热议问题