ChrVik
ChrVik

Reputation: 315

Highcharts - How to change display data and remove mouseover?

I have a Highcharts pie chart on my page, working fine.
What I would like to do is remove the values displayed on mouseover of the pie and instead display the values statically with dataLabels(?).

I am not that good at JS and have no idea where to start.
See image below for explanation.

$(function() {
    $('#total').highcharts({
      credits: {
        enabled: false
      },
      data: {
        table: document.getElementById('datatable_total'),
        switchRowsAndColumns: true,
        endRow: 1
      },
      chart: {
        type: 'pie'
      },
      title: {
        text: ''
      },
      yAxis: {
        allowDecimals: false,
        title: {
          text: 'Units'
        }
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.series.name + '</b><br/>' +
            this.point.y + ' ' + this.point.name.toLowerCase();
        }
      },
      navigation: {
        buttonOptions: {
          verticalAlign: 'bottom',
          y: -20
        }
      }
    });
  });

enter image description here

Upvotes: 0

Views: 328

Answers (1)

AshBringer
AshBringer

Reputation: 2673

$(function () {
    Highcharts.chart('container', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: {point.y}'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b> <br>{point.y}</br>',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                }
            }
        },
        series: [{
            colorByPoint: true,
            data: [{
                name: 'Europe',
                y: 50
            }, {
                name: 'Africa',
                y: 25
            }, {
                name: 'Australia',
                y: 18
            }, {
                name: 'US',
                y: 7
            }]
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Upvotes: 1

Related Questions