Donut Chart Mouseover Change Text Javascript

Change text and show the legend in a customized way on mouseover for a category.

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br />
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  subtitles: [{
    text: "Performance",
    fontStyle: "bold",
    verticalAlign: "center",
    dockInsidePlotArea: true
  },{
    text: "Legend (On Hover)",
    fontStyle: "bold",
    verticalAlign: "top",
    horizontalAlign: "right",
    dockInsidePlotArea: true
  }],
  toolTip:{
    enabled: false,
  },
  data: [{
    type: "doughnut",
    indexLabel: "",
    mousemove: donutChartMousemove,
    showInLegend: false,
    dataPoints: [
      {
        "y": 90,
        "label": "In Range",
        "color": "#218340",
        "legendLabel": "(Temp ≤ + 1°F)"
      },
      {
        "y": 7,
        "label": "In Tolerance",
        "color": "#F7B731",
        "legendLabel": "(+ 1°F < Temp <= 2°F)"
      },
      {
        "y": 3,
        "label": "Above Setpoint",
        "color": "#A62337",
        "legendLabel": "(Temp > + 2°F)"
      }
    ]
  }]
});
chart.render();

function donutChartMousemove(e){
  // Update the subtitle
  chart.subtitles[0].set("text", e.dataPoint.label + " (" + e.dataPoint.y + "%)");
  chart.subtitles[0].set("fontColor", e.dataPoint.color);

  // Update the legend
  chart.subtitles[1].set("text", e.dataPoint.legendLabel);
  chart.subtitles[1].set("fontColor", e.dataPoint.color);
}