CODEWITHSUNDEEP
highcharts
Bastcri
Bastcri

Reputation: 115

Highcharts- How to modify tooltip texts in drilldown pie chart

I have the following pie chart which has a drilldown in the light green area. So if you click on that green area another pie chart opens. In the tooltips of each section of the first piechart there is a text that says Brands and this text also appears in the button to go Back (it says Back to Brands) once the drilldown pie chart appears. In other words the Back button helps the viewer to go back to the first pie chart. My question is how do I get rid of the text Brands. I don't need that text at all. I just want the button to say Back and that the text Brands does not appear in the tooltips. Thanks for your help. 

Highcharts.chart('recoveryGraf', {
    chart: {
        type: 'pie'
    },
    title: {
        text: ''
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                format: '{point.name}: {point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        colors: ['#005eb8','#56b6cc','#8bc540'],
        data: [{
            name: 'Potential for further recovery',
            y: 6,
            drilldown: null
        }, {
            name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)',
            y: 22,
            drilldown: null
        }, {
            name: 'Recycled',
            y: 72,
            drilldown: 'Recycleds'
        }]
    }],
    drilldown: {
        series: [{
            name: 'Recycleds',
            id: 'Recycleds',
            colors: ['#57a133','#8bc540'],
            data: [
                ['Exported', 16],
                ['Used Europe', 84]
            ]
        }]
    }
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="recoveryGraf"></div>

Upvotes: 0

Views: 1172

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Check drilldown.drillUpButton and set desired message in button

Highcharts.setOptions({
  lang: {
    drillUpText: '<< Back'
  }
});

Highcharts.chart('recoveryGraf', {
  chart: {
    type: 'pie'
  },
  title: {
    text: ''
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}: {point.y:.1f}%'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    colors: ['#005eb8', '#56b6cc', '#8bc540'],
    data: [{
      name: 'Potential for further recovery',
      y: 6,
      drilldown: null
    }, {
      name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)',
      y: 22,
      drilldown: null
    }, {
      name: 'Recycled',
      y: 72,
      drilldown: 'Recycleds'
    }]
  }],
  drilldown: {
    series: [{
      name: 'Recycleds',
      id: 'Recycleds',
      colors: ['#57a133', '#8bc540'],
      data: [
        ['Exported', 16],
        ['Used Europe', 84]
      ]
    }]
  }
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="recoveryGraf"></div>

Upvotes: 1

Related Questions