JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ccchart.org/js/ccchart.js" charset="utf-8"></script>
<canvas id="hoge"></canvas>

JavaScript

//暖色系の色合いのグラデーションを決めておく
var _GRADIENT={
        0.1 : 'red',
        0.6 : 'orange',
        0.75: 'gold',
        0.9 : '#eaff00',
        1.0 : 'yellow'
}

var chartdata102 = {

  "config": {
    "title": "リアルタイム ヒートマップ",
    "type": "heatmap",
    "maxWsColLen":300,   //表示するデータの件数
    "outerCircle": 70,   //円の大きさ
    "hm_grad": _GRADIENT,//色合い
    "bg": "#eee"         //背景色 
  },

  "data": [
    ["X"], //X位置
    ["Y"]  //Y位置
  ]
};

  ccchart.wsCloseAll();//一旦クリア
  ccchart
      .init('hoge', chartdata102)
      .ws('ws://ccchart.com:8024')
      .on('message', ccchart.wscase.oneColAtATime)