Scatter plot

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          return false;
        }
      }
    },
    scatter: {
      marker: {
        radius: 5,
        states: {
          hover: {
            enabled: true,
            lineColor: 'rgb(100,100,100)'
          }
        }
      },
      states: {
        hover: {
          marker: {
            enabled: true
          }
        }
      },

    }
  },
  tooltip: {
    backgroundColor: '#fff',
    borderColor: '#C6C8C9',
    borderRadius: 2,
    headerFormat: null,
    useHTML: true,
		hideDelay: 99999999,
    stickOnContact: true,
    shadow: {
      offsetX: 1,
      offsetY: 1,
      opacity: 0.15,
      width: 3,
    },

    style: {
      color: '#2E363A',
      fontFamily: 'Roboto, sans-serif',
      fontSize: '.75rem'
    },
    pointFormatter: function() {
      const x = this.x,
        y = this.y;
      const points = this.series.points.filter(p => p.x === x && p.y === y);

      var tooltipString;
      let i = 0;

      tooltipString = '<div class="lead-quality-tooltip r-text-sm fixed-height" style="min-width:' + (Math.max.apply(Math, points.map(function(o) {
          return o.name.length;
        })) + 100) + 'px !important; height: 80px; overflow-y: scroll">' +
        '<p class="r-mb-1"> ' +
        x.toFixed(2) + ', ' + y + '%' +
        '</p>';
      for (let point of points) {
        tooltipString += `<div class="${(i !== points.length - 1) ? 'r-mb-2' : ''}">
														<h3 class="r-font-bold r-mb-1 r-text-sm"> 
															${point.name} 
														</h3>
														<p class="r-mb-0"> 
															Available Units: ${point.availableUnits} 
														</p> 
													</div>`;
        i++;
      }

      return tooltipString;
    }
  },
  series: [{
    name: 'Property',
    data: [{
        "name": "1123",
        "useAIDemandForFo": false,
        "availableUnits": 29,
 ...