JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
CSS
html, body, #container { width: 100%; height: 100%; margin: 0px; padding: 0px}
JavaScript
var INACTIVE_OPACITY = .67
// This is input.
var isDiscrete = [false, false, false, false, ['setosa', 'versicolor', 'virginica']];
var axis_texts = ['sepal length', 'sepal width', 'petal length', 'petal width', 'iris'];
var data = [
[5.1, 3.5, 1.4, .2, null],
[4.9, 3, 1.4, .2, 0],
[7, 3.2, null, 1.4, 1],
[6.3, 2.9, 5.6, 1.8, 2],
[2.9, 5.6, 1.8, 1.5, 2],
[5.2, 3, 4, 1.1, 1],
[3.2, 1.5, 1.8, .2, 1],
];
/** Transpose the data to get columns */
var colData = [];
for (var j=0; j<data[0].length; ++j) {
colData[j] = [];
for (var i=0; i<data.length; ++i)
colData[j][i] = data[i][j];
}
/** Get per-column extremes and scale columns onto [0, 1] */
var colLimits = [];
function nonNull(el) { return el != null; };
for (var j=0, col; j<colData.length; ++j) {
col = colData[j];
var nncol = col.filter(nonNull);
colLimits.push([Math.min.apply(null, nncol),
Math.max.apply(null, nncol)]);
for (var i=0, val; i<col.length; ++i) {
val = col[i];
if (nonNull(val))
data[i][j] = colData[j][i] = (val - colLimits[j][0]) / (colLimits[j][1] - colLimits[j][0]);
}
}
console.log(data);
/** Convert value from [0, 1] back to columns real span */
function toValue(value, column) {
return value * (colLimits[column][1] - colLimits[column][0]) + colLimits[column][0];
}
/** Align yAxes onto the integer ticks of the xAxis.
*/
var _in_redraw = false;
function reposition_yaxes() {
if (_in_redraw)
return;
_in_redraw = true;
var ax = this.xAxis[0],
ex = ax.getExtremes(),
spacing = (ax.toPixels(ex.max) - ax.toPixels(ex.min)) / (ex.max - ex.min);
for (var i=1; i<this.yAxis.length; ++i)
this.yAxis[i].update({offset: - (i - 1) * spacing}, false);
this.redraw(false);
_in_redraw = false;
}
$(function () {
function labels_formatter(col) {
return {
reserveSpace: false,
x: -3,
formatter: function() {
var value =...