How to remove tool-tip in google chart

Question

I am working on Google-charts, in which i am facing some issues

I am rendering a donut chart which has more then 10 data so what is happening when the width of data displaying exceeds it shows up in tool-tip like

which i don't want

What i am trying to do like how many headers are there let it be there not to push it into tool-tip

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604]
  ]);

  var options = {
    pieHole: 0.6,
    legend: {
      position: 'right',
    },
    width: 'auto',

    height: 'auto'
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

I don't want to remove the legends i just want to show them in one go rather then to showing up in tool-tip where user have to click to see other legends

Data to check

[["Outlet","Amount"],["CHEF BAKERS BROOKFIELD",738999],["CHEF BAKERS ARAKERE",106050],["CHEF BAKERS AMEENPUR",89358],["CHEF BAKERS AYYAPPA NGR",80088],["Chef Bakers Bellandur",321705],["CHEF BAKERS BRIGADE METROPOLIS",65088],["CHEF BAKERS BAGMANE CBP",145432],["CHEF BAKERS CHANDAPURA",92830],["DIVYA SREE TECHNO PARK",82946],["Chef Bakers Doddanekkundi",92590],["CHEF BAKERS SIDDAPURA",115142],["CHEF BAKERS ECITY",163745],["CHEF BAKERS VYDEHI",84367],["CHEF BAKERS HARLUR ROAD",101337],["Chef Bakers Hennur Main Road",18045],["CHEF BAKERS HSR LAYOUT",358232],["CHEF BAKERS BOTANICAL GARDEN",22256],["CHEF BAKERS KADUBEESANAHALLI",277964],["CHEF BAKERS COFFEE BOARD",164906],["Chef Bakers Kaggadasapura",73045],["Chef Bakers Koramangala",79381],["CHEF BAKERS KASAVANAHALLI",424056],["Chef Bakers Marathahalli 1",115410],["Chef bakers Marathahalli 2",105703],["Chef Bakers Mahadevapura",209014],["CHEF BAKERS BEL LAYOUT",58661],["CHEF BAKERS MG ROAD",70005],["CHEF BAKERS MANYATA TECH PARK",105590],["CHEF BAKERS NAGAWARA",47832],["CHEF BAKERS PRESTIGE SHANTHINIKETAN",135772],["CHEF BAKERS PRITECH",301201],["RGA TECH PARK",64525],["CHEF BAKERS RAMANTHAPUR",62752],["CHEF BAKERS RR NAGAR",94200],["Chef Bakers Kadugodi",353045],["CHEF BAKERS SARJAPURA ROAD",84425],["CHEF BAKERS SINGASANDRA",60735],["CHEF BAKERS SPICE GARDEN",135243],["Chef Bakers Whitefield",427212],["CHEF BAKERS YELAHANKA",293061]]

score 2 · Answer 1 · answered Apr 11 '19 at 11:28

you can use option --> legend.maxLines
to add more lines to the legend.

note: this option only works with --> legend.position = top

see following working snippet...

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604]
  ]);

  var options = {
    pieHole: 0.6,
    legend: {
      position: 'top',
      maxLines: 5
    },
    width: 'auto',
    height: 'auto'
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

sir i think it can take only 6 max length as i have updated a `Array` in my post please check with that it is comming like that only with tool-tip — vivek singh, Apr 11 '19 at 11:48
with that much data, not sure a pie chart is the best representation, 6 does appear to be the max -- you might think about creating your own custom legend, [here is an example](https://stackoverflow.com/a/36064828/5090771) — WhiteHat, Apr 11 '19 at 11:52

score 1 · Answer 2 · answered Apr 11 '19 at 19:11

You might want to try this,

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()
}

or

legend: {
  position: 'top',
  maxLines: data.getNumberOfRows()/4
}

doing this it will always give you sufficient number of rows so that you can have all your legends on one page and don't have to have scroll

google.charts.load('current', {
  'packages': ['corechart'],
  'language': 'hi_IN'
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Outlet", "Amount"],
    ["S0001", 7153214],
    ["S0002", 1319026],
    ["S0003", 1497004],
    ["S0004", 1597004],
    ["S0005", 1697004],
    ["S0006", 1797004],
    ["S0007", 1897004],
    ["S0008", 13897004],
    ["S0009", 2097004],
    ["S0010", 1597004],
    ["S00011", 1698604],
    ["S00012", 1698604],
    ["S00013", 1698604],
    ["S00014", 1698604],
    ["S00015", 1698604],
    ["S00016", 1698604],
    ["S00017", 1698604],
    ["S00018", 1698604],
    ["S00019", 1698604]
  ]);
  


  var options = {
    pieHole: 0.3,
    legend: {
      position: 'top',
      maxLines: data.getNumberOfRows()
    },
    width: 'auto',

    height: 'auto'
  };
  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart" style="width: 100%; height: 550px;"></div>

the kind of data i have it is taking data inside tool-tip only, i think i have to use some other library,thanx for your help — vivek singh, Apr 12 '19 at 05:35

score 0 · Answer 3 · answered Apr 11 '19 at 11:04

0

The problem is caused by the legend in the chart taking up more space than is available in the containing element.

If you want to remove the legend, which I don't recommend as the chart becomes very unclear without it, you can set position: 'none' in the settings.

var options = {
  pieHole: 0.6,
  legend: {
    position: 'none',
  },
  width: 'auto',
  height: 'auto'
};

answered Apr 11 '19 at 11:04

Rory McCrossan

331,213
40
305
339

yup i already knew that what i am trying to do is to align the legends in one line no matter how many are they, as you can check into my image it is coming into tool-tip which i don't want – vivek singh Apr 11 '19 at 11:14
That's not possible with the Google chart plugin. It automatically detects when there is not enough space in the containing element and converts the legend to be paged. There are not settings available to amend that. If you want this behaviour you'll need to use another chart library which allows it, or create your own – Rory McCrossan Apr 11 '19 at 11:16
create your :- this i don't have any idea how can i do that, can you suggest me any other library – vivek singh Apr 11 '19 at 11:19
Not off hand, I'd suggest using Google. That being said, I don't believe any libraries will do this out of the box. I'm not sure how you're expecting something to be displayed in space that doesn't exist. – Rory McCrossan Apr 11 '19 at 11:20
even i know that is not a good example to show, but my seniors have that kind of requirement only – vivek singh Apr 11 '19 at 11:24

How to remove tool-tip in google chart

3 Answers3