columns の formatter を progress にします。

詳しくはこちら

< コード例 >

データはサーバー側で用意してます。

  // パーセンテージプログレスバー //
  {
    title: "TTS Ratio", field: "PCNT_TTS", formatter: "progress", formatterParams: {
      min: 0,                   // 範囲最小値
      max: 100,                 // 範囲最大値
      color: ["#008600"],       // 棒グラフ色
      legend: true,             // 値表示 or not
      legendColor: "#FFFFFF",   // 値色
      legendAlign: "justify",   // 値位置
    },
    width: 100,
    topCalc: "avg", bottomCalcParams: { precision: 1 },
    /*formatter: function (cell, formatterParams, onRendered) {
      return Math.round(cell.getValue() / 5)
    },*/
  }

< 画面例 >

過去1年分の為替レートの最大を100, 最小を0とした率を表示