[json] globals > tooltip > rules

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

  <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;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      globals: {
        tooltip: {
          border: '3px solid red',
          padding: 15,

          rules: [{
              rule: '%v > 40',
              backgroundColor: 'red'
            },
            {
              rule: '%v < 20',
              backgroundColor: 'green'
            }
          ],
        },
      },
      graphset: [{
        type: 'area',
        title: {
          text: 'Area Chart',
          fontSize: 20,
        },
        legend: {},
        crosshairX: {},
        scaleX: {},
        scaleY: {
          guide: {
            visible: false
          }
        },
        plot: {
          valueBox: {}
        },
        series: [{
            values: [35, 42, 67, 89, 25, 34, 67, 85],
            backgroundColor: '#212121'
          },
          {
            values: [25, 59, 30, 16, 51, 99, 31, 39],
            backgroundColor: '#616161'
          }
        ]
      }]
    };

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

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">

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

<body>
  <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>

</html>

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

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

.zc-ref {
  display: none;
}

let chartConfig = {
  globals: {
    tooltip: {
      border: '3px solid red',
      padding: 15,

      rules: [{
          rule: '%v > 40',
          backgroundColor: 'red'
        },
        {
          rule: '%v < 20',
          backgroundColor: 'green'
        }
      ],
    },
  },
  graphset: [{
    type: 'area',
    title: {
      text: 'Area Chart',
      fontSize: 20,
    },
    legend: {},
    crosshairX: {},
    scaleX: {},
    scaleY: {
      guide: {
        visible: false
      }
    },
    plot: {
      valueBox: {}
    },
    series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85],
        backgroundColor: '#212121'
      },
      {
        values: [25, 59, 30, 16, 51, 99, 31, 39],
        backgroundColor: '#616161'
      }
    ]
  }]
};

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