$(function() {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1,
events: {
load: function() {
this.yAxis.forEach(function(xAxis) {
xAxis.update({
tickLength: xAxis.maxLabelLength + xAxis.minPixelPadding
}, false);
});
this.redraw();
}
}
},
xAxis: {
categories: ['']
},
yAxis: [{
categories: ['', '', '']
}],
series: [{
borderWidth: 1,
dataLabels : {
enabled: true,
format: '{point.value}'
} ,
data: [
{x: 0, y:0, value: "c"},
{x: 0, y:1, value: "b"},
{x: 0, y:2, value: "this wont fit conlumn width aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
+"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
},
]
}]
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>I'm using the high chart and I need that the column width fits with the maximum length of the max data labels.
In my example you can see the problem clearly:
[http://jsfiddle.net/aferpq9m/1/]
You need to use breaks. For example:
xAxis: {
categories: [''],
breaks: [{
from: 0.5,
to: 0.9,
breakSize: 0
}, {
from: 1,
to: 1.5,
breakSize: 0
}, {
from: 1.5,
to: 2,
breakSize: 0
}]
}
Live demo: http://jsfiddle.net/BlackLabel/2hrc1xdf/
API Reference: https://api.highcharts.com/highcharts/xAxis.breaks