PlotLabel jsRule LIVE

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #myChart {
      height: 100%;
      width: 100%;
      min-height: 150px;
    }
  </style>
</head>

<body>
  <div id="myChart"></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var keysForPlotLabel = {
      1: {
        value: 'aaaaaaa'
      },
      2: {
        value: 'bbbbbbbb'
      },
      3: {
        value: 'cccccccc'
      }
    };

    window.customPlotLabel = function(e) {
      var customValue = keysForPlotLabel[e.value].value
      return {
        "text": "<span style='color:%color'>%t: </span>" + customValue,
      }
    }

    window.customTooltip = function(e) {
      var customValue = keysForPlotLabel[e.value].value
      return {
        "text": "%t: " + customValue,
      }
    }

    var myConfig = {
      "graphset": [{
        "type": "line",
        "crosshair-x": {
          "plot-label": {
            jsRule: 'customPlotLabel()'
          }
        },
        "scale-x": {
          "step": "30minute",
          "transform": {
            "type": "date",
            "all": "%Y-%m-%d, \n %H:%i"
          },
          "zooming": true
        },
        "scale-y": {
          "label": {
            "text": "Price ($/Mwh)"
          },
          "min-value": 0,
          "zooming": true
        },
        "series": [{
            "values": [
              [1481061600000, 1, "(TP 23)"],
              [1481061900000, 2, "(TP 23)"],
              [1481062200000, 3, "(TP 23)"],
              [1481062500000, 2, "(TP 23)"],
              [1481062800000, 3, "(TP 23)"]
            ],
          },
          {
            "values": [
              [1481061600000, 1, "(TP 23)"],
              [1481063400000, 1, "(TP 24)"],
              [1481065200000, 2, "(TP 25)"],
              [1481067000000, 3, "(TP 26)"],
              [1481068800000, 3, "(TP 27)"]
            ],
          }
        ],
        "tooltip": {
          "visible": 1,
          "text": "%t: %v",
          "font-size": "12px",
          "font-weight": "bold",
          "decimals": 2,
          "thousands-separator": ",",
          jsRule: 'customTooltip()'
        }
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: '100%',
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id="myChart"></div>
</body>

</html>

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#myChart {
  height: 100%;
  width: 100%;
  min-height: 150px;
}

var keysForPlotLabel = {
  1: {
    value: 'aaaaaaa'
  },
  2: {
    value: 'bbbbbbbb'
  },
  3: {
    value: 'cccccccc'
  }
};

window.customPlotLabel = function(e) {
  var customValue = keysForPlotLabel[e.value].value
  return {
    "text": "<span style='color:%color'>%t: </span>" + customValue,
  }
}

window.customTooltip = function(e) {
  var customValue = keysForPlotLabel[e.value].value
  return {
    "text": "%t: " + customValue,
  }
}

var myConfig = {
  "graphset": [{
    "type": "line",
    "crosshair-x": {
      "plot-label": {
        jsRule: 'customPlotLabel()'
      }
    },
    "scale-x": {
      "step": "30minute",
      "transform": {
        "type": "date",
        "all": "%Y-%m-%d, \n %H:%i"
      },
      "zooming": true
    },
    "scale-y": {
      "label": {
        "text": "Price ($/Mwh)"
      },
      "min-value": 0,
      "zooming": true
    },
    "series": [{
        "values": [
          [1481061600000, 1, "(TP 23)"],
          [1481061900000, 2, "(TP 23)"],
          [1481062200000, 3, "(TP 23)"],
          [1481062500000, 2, "(TP 23)"],
          [1481062800000, 3, "(TP 23)"]
        ],
      },
      {
        "values": [
          [1481061600000, 1, "(TP 23)"],
          [1481063400000, 1, "(TP 24)"],
          [1481065200000, 2, "(TP 25)"],
          [1481067000000, 3, "(TP 26)"],
          [1481068800000, 3, "(TP 27)"]
        ],
      }
    ],
    "tooltip": {
      "visible": 1,
      "text": "%t: %v",
      "font-size": "12px",
      "font-weight": "bold",
      "decimals": 2,
      "thousands-separator": ",",
      jsRule: 'customTooltip()'
    }
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: '100%',
  width: '100%'
});