CODEWITHSUNDEEP
javascripthighcharts
Vladimir Lenkov
Vladimir Lenkov

Reputation: 73

Highcharts grouping column, hide in tooltip

I'm using grouping column in highcharts, I need to show only usage columns in tooltip(shared: true). But I see all grouping column http://jsfiddle.net/8o6umxdp/, I want to see only the values of the columns in this field, not grouped. I'm hiding this legend "showInLegend: false" but this legend is showing in the tooltip.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            grouping: true
        }
    },
    series: [ {
        name: 'Tokyo',
        data: [0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0],
        grouping: 'tok',
        showInLegend: false

    }, {
        name: 'Tokyo',
        data: [1, 0, 3, 0, 4, 0, 0, 0, 0, 0, 0, 0]

    }, {
        name: 'New York',
        data: [0, 0, 0, 0, 33, 0, 0, 0, 0, 0, 0, 0],
        grouping: 'mew',
        showInLegend: false
    }, {
        name: 'New York',
        data: [80, 0, 0, 42, 23, 0, 0, 0, 0, 0, 0, 0],

    }, {
        name: 'London',
        data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

    }, {
        name: 'Berlin',
        data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

    }]
});

want to hide this tooltip in charts

but here only berlin and london, how to hide tokyo and new york

Upvotes: 1

Views: 299

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You could replace your pointFormat with a pointFormatter and filter by Series.showInLegend.

For example (JSFiddle):

// ...
tooltip: {
    pointFormatter: function() {
        if(this.series.options.showInLegend !== false)
            return '<tr><td style="color:'+this.series.color+';padding:0">'+this.series.name+': </td><td style="padding:0"><b>'+this.y.toFixed(1)+' mm</b></td></tr>';
    }
}

This should mimic your pointFormat style, but allow for more dynamic inclusion.

Upvotes: 1

Related Questions