Update tooltip data without reloading whole chart in Canvasjs

Question

I want to update my Tooltip in my canvas js Chart without reloading the whole chart.

let arr = this.graph_arr;
let a = [];
let b = [];

arr.map((val) => {
  val.data.map((val2) => {
    b.push({
      x: new Date(val2.date),
      y: val2.revenue,
      cn: val2.check_in,
      rp: val2.rev_par,
      arr: val2.avrr,
      adr: val2.avg_daily_rate,
      date: moment(val2.date).format('Do, MMMM'),
      day: moment(val2.date).format('dddd')

    })
  })

  a.push({
    type: "spline",
    name: val.channel_img.split('.')[0].toUpperCase(),
    markerSize: 1,
    showInLegend: true,
    dataPoints: b,
    label: val.channel_img,
  })
  b = [];
})

let chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  theme: "light2",
  axisY2: {
    valueFormatString: "1'%'"
  },
  axisY: {
    suffix: "%"
  },
  axisX: {
    gridThickness: 1,
    valueFormatString: "DD/MMM"
  },
  legend: {
    cursor: "pointer",
    itemclick: this.toogleDataSeries
  },
  toolTip: {
    shared: false,

    content: this.selected == 'arr' ?
      `<div style='\"'width: 210px;'\"'>ARR: {arr}, date: {date} </div>` :
      this.selected == 'adr' ?
      `<div style='\"'width: 210px;'\"'>ARR: {arr}, date: {date] </div>` : null,

    cornerRadius: '8'
  },
  data: a
});

chart.render();

I have this Custom Tooltip. I want to change data in it from a dropdown without reloading. Currently I am using ternary operator and reloading chart. I want to change Tooltip content without reloading when user select from dropdown.

Answer 1

You can programmatically show toolip by using showAtX method. Below is an example:

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Show Tooltip based on dropdown"
  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }
  ]
});


chart.render();

var xVal = document.getElementById("xVal");
//Pass dataPoints as option to drop-down     
for(var i=0; i<chart.options.data[0].dataPoints.length;i++){
  var xValOption = document.createElement("option");

  xValOption.text = chart.options.data[0].dataPoints[i].x = chart.options.data[0].dataPoints[i].x;
  xVal.appendChild(xValOption);
}


xVal.addEventListener( "change",  showTooltip);


//
function showTooltip(e){   
  if(xVal.value)
    chart.toolTip.showAtX(Number(xVal.value));
  else 
    chart.toolTip.hide();
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 80%; float: left"></div>
<div style="float: right; width: 15%">
    Show Tooltip for <select id="xVal">
      <option>Select</option>
    </select>
</div>