Highcharts scatter plot with a colorbar

highcharts-scatter-with-colorbar.html

<!-- Put these scripts in the same folder -->
<script src="jquery-1.11.1.min.js"></script>
<script src="highcharts.src.js"></script>
<script src="map.js"></script>
<script src="exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>
$(function () {
    // This wrapper is thanks to Paweł Fus
    // https://stackoverflow.com/a/31161304/330558
    (function (H) {
        
        // wrap for rendering ticks: 
        H.wrap(H.Chart.prototype, "render", function(p) {
            p.call(this);
            if (this.series && this.series[0] && this.series[0].colorAxis) {
                this.colorAxis[0].render();   
            }
        });
        H.wrap(H.Chart.prototype, "getAxisMargins", function(p) {
            p.call(this);
            if (this.series && this.series[0] && this.series[0].colorAxis) {
                this.colorAxis[0].getOffset();   
            }
        });
        
        // add colorAxis
        H.seriesTypes.scatter.prototype.axisTypes.push("colorAxis");
        H.seriesTypes.scatter.prototype.optionalAxis = "colorAxis";

        H.wrap(
          H.seriesTypes.scatter.prototype,
          "init",
          function(p, chart, options) {
            p.call(this, chart, options);
          }
        );

        // draw points and add setting colors
        H.wrap(
          H.seriesTypes.scatter.prototype,
          "translate",
          function(p, positions) {
            p.call(this, positions);
            this.translateColors();
          }
        );

        // copy method from heatmap for color mixin
        H.seriesTypes.scatter.prototype.translateColors = H.seriesTypes.heatmap.prototype.translateColors;

        // use "percentage" or "value" or "custom_param" to calculate color
        H.seriesTypes.scatter.prototype.colorKey = "colorv";
    })(Highcharts);

	$("#container").highcharts({
      chart: {
        backgroundColor: "white"
      },
      title: {
        text: "Gene"
      },
      xAxis: {
        type: "linear",
        title: {
          text: "wt"
        },
        gridLineWidth: 0
      },
      yAxis: {
        title: {
          text: "mpg"
        },
        type: "linear",
        gridLineWidth: 0
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      plotOptions: {
        series: {
          label: {
            enabled: false
          },
          turboThreshold: 0,
          showInLegend: false
        },
        scatter: {
          marker: {
            symbol: "circle"
          }
        }
      },
      colorAxis: {
            min: 0,
            max: 8,
            tickPositions: [0, 8],
            stops: [
                [0, "#440154"],
                [0.5, "#2C6079"],
                [1, "#FDE725"]
            ]
        },
      legend: {
        title: {
          text: "Log2 CPM"
        },
        align: "right"
      },
      series: [
        {
          type: "scatter",
          group: "group",
          data: [
            {
              x: -13.7526,
              y: -19.5709,
              color: "#2C6079",
              colorv: 5.8429
            },
            {
              x: -8.5932,
              y: -15.5523,
              color: "#6AAD69",
              colorv: 7.0206
            },
            {
              x: 13.1721,
              y: -12.3604,
              color: "#440154",
              colorv: 0
            },
            {
              x: -13.7844,
              y: -18.3881,
              color: "#FDE725",
              colorv: 7.2322
            },
            {
              x: -10.7087,
              y: 10.0679,
              color: "#440154",
              colorv: 0
            }
          ]
        }
      ]
    }
  );
});

</script>

screenshot.png