CODEWITHSUNDEEP
javascripthtmlcsshighcharts
dawat1234
dawat1234

Reputation: 11

Show Highcharts tooltip at the bottom of the chart in responsive mobile version

I have this line chart where I am showing a shared tooltip of all series on the right side of the chart. However, in the mobile view, it looks ugly because half the screen space is taken by the chart and half by the tooltip. In the mobile responsive layout, I want the chart to take the whole screen width and shared tooltip to go to the bottom of the chart. How can I achieve this?

I have written the code below and it works on jsfiddle.

responsive: {
    rules: [{
      chartOptions: {
        chart: {
          marginRight: 0
        },
        tooltip: {
        outside: true,
          positioner: function(boxWidth, boxHeight, point) {
            var chart = this.chart; // get plotTop;

            return {
              x: chart.plotLeft + chart.plotSizeX - 100,
              y: chart.chartHeight - chart.plotTop - chart.xAxis[0].bottom + boxHeight + 50
            };
          }
        }
      },
      condition: {
        maxWidth: 640
      }
    }]
  }

https://jsfiddle.net/userMB/k790c4rw/4/

But the problem is that my chart is enclosed inside a container div which is further enclosed inside a section. Like the code below: Hence, the tooltip doesn't show below the chart as I want. Any ideas how I can achieve this?

<section class="section section-lg ">
    <div class="container" style="max-width: 95vw; border: 1px solid grey; min-height: 65vh;">
        <"some form">
        <div id="chart" style="min-height: 50vh;"></div>
    </div>
<section>

And that same code behaves differently within enclosed section and div elements. see https://jsfiddle.net/userMB/k790c4rw/10

Upvotes: 0

Views: 796

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can use responsive rules and define different options for small screens. For example:

  responsive: {
    rules: [{
      chartOptions: {
        chart: {
          marginRight: 0
        },
        tooltip: {
          positioner: function(boxWidth, boxHeight, point) {
            var chart = this.chart; // get plotTop;

            return {
              x: chart.plotLeft + chart.plotSizeX - 100,
              y: chart.plotTop + chart.plotSizeY - 50
            };
          }
        }
      },
      condition: {
        maxWidth: 640
      }
    }]
  }

Live demo: https://jsfiddle.net/BlackLabel/w4qsjpy7/

API Reference: https://api.highcharts.com/highcharts/responsive.rules

Upvotes: 2

Related Questions