$(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>
Estoy usando el gráfico alto y necesito que el ancho de la columna se ajuste a la longitud máxima de las etiquetas de datos máximos.
En mi ejemplo se puede ver el problema claramente:
[http://jsfiddle.net/aferpq9m/1/]
Necesitas usar descansos. Por ejemplo:
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 }] }
Demostración en vivo: http://jsfiddle.net/BlackLabel/2hrc1xdf/
Referencia de la API: https://api.highcharts.com/highcharts/xAxis.breaks