Highchart - show heatmap legend by category - highcharts

Question

I would like to use the heatmap to generate a status overview of a machine for a given day. The states show up as I want but I have a question about the legend. Can I show a 'traditional' legend that shows the states and their colors.
Highchart fiddle: http://jsfiddle.net/p7v2f117/7/
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 40
},
title: {
text: 'HIGHCHART - Machine State on 1/7/2015'
},
xAxis: { // minute interval
categories: ['00', '15', '30', '45']
},
yAxis: { // hour
categories: ['20:00', '21:00'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 320
},
tooltip: {
formatter: function () {
return '<b>' + this.series.yAxis.categories[this.point.y] + ' (' + this.series.xAxis.categories[this.point.x] + 'min)</b>' + '<br>state: <b>' + this.point.value + '</b><br>More details go here'
}
},
series: [{
name: 'Machine State',
borderColor: '#000000',
borderWidth: 1,
data: [{
x: 0,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 1,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 2,
y: 0,
value: 'RUN',
color: '#00FF00'
}, {
x: 3,
y: 0,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 0,
y: 1,
value: 'IDLE',
color: '#00FFFF'
}, {
x: 1,
y: 1,
value: 'DOWN',
color: '#FF0000'
}, {
x: 2,
y: 1,
value: 'PM',
color: '#C0C0C0'
}, {
x: 3,
y: 1,
value: 'Marathon',
color: '#FFCCFF'
}, ],
dataLabels: {
enabled: false
}
}]
});
});
I am trying to basically get the same behavior that I can get in Fusion charts, where the color is automatically driven by the status field (text) and it shows the categories. The fact that they are clickable is nice but not necessary.
Fusionchart fiddle: http://jsfiddle.net/c8V2F/25/
FusionCharts.ready(function () {
var chart = new FusionCharts({
type: 'heatmap',
renderAt: 'chartdiv1',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "FUSIONCHART - Machine State on 1/7/2015",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;'>$tlLabel</div>{br}State: <b>$value</b>{br}details can go here",
"mapbycategory": "1",
//Cosmetics
"showXaxisLabels": "1",
"showYaxisLabels": "1",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"dataset": [{
"data": [{
"rowid": "20:00",
"columnid": "00",
"categoryid": "RUN",
"displayvalue": ""
}, {
"rowid": "20:00",
"columnid": "15",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "30",
"categoryid": "RUN"
}, {
"rowid": "20:00",
"columnid": "45",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "00",
"categoryid": "IDLE"
}, {
"rowid": "21:00",
"columnid": "15",
"categoryid": "DOWN"
}, {
"rowid": "21:00",
"columnid": "30",
"categoryid": "PM"
}, {
"rowid": "21:00",
"columnid": "45",
"categoryid": "Marathon"
}, ]
}],
"colorrange": {
"gradient": "0",
"color": [{
"label": "RUN",
"code": "00FF00"
}, {
"label": "ASSIST",
"code": "FFFF00"
}, {
"label": "DOWN",
"code": "FF0000"
}, {
"label": "IDLE",
"code": "00FFFF"
}, {
"label": "PM",
"code": "C0C0C0"
}, {
"label": "ENG",
"code": "00B0F0"
}, {
"label": "Marathon",
"code": "FFCCFF"
}
]
}
}
});
chart.render();
});
Is there a simple way to not show the legend at all?
I can certainly convert the states back to a number if that makes more sense.
--Nico

Answer 1

You need to cover default parameter for highmaps:
var H = Highcharts;
H.seriesTypes.heatmap.prototype.axisTypes = ['xAxis', 'yAxis'],
H.seriesTypes.heatmap.prototype.optionalAxis = null;
Example: http://jsfiddle.net/ww6Lbnc5/