CODEWITHSUNDEEP
highcharts
mohammad
mohammad

Reputation: 1028

Highchart update tooltip when setData

I create a sample of highchart with some data. you can see it here. 

var chart = Highcharts.chart('container', {
     tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x: %b %e}: <b>{point.y:.2f}</b>'
        },
series: [{
        name : "tooltip 1",
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
}]
});


$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5]);
});

I want to when #button is clicked we set new tooltip name for example : tooltip 2.

How can set new tooltip name after click event ?

Upvotes: 0

Views: 676

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

I think you want to change the name of series which will reflect in tooltip

Fiddle

$('#button').click(function () {
    chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5]);
    chart.series[0].name="tooltip 2";
});


var chart = Highcharts.chart('container', {
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x: %b %e}: <b>{point.y:.2f}</b>'
  },
  series: [{
    name: "tooltip 1",
    data: [29.9, 71.5, 106.4, 129.2, 144.0]
  }]
});


// the button action
$('#button').click(function() {
  chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5]);
  chart.series[0].name = "tooltip 2";
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Set new data</button>

Upvotes: 1

Related Questions