Is it possible to wrap my label text or increase the cell height to make it responsive? Check out my jsfiddle example.
See how the labels are overlapping here
Here is the HTML:
<div id="container" class="chart-container"></div>
And this is the jQuery:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column",
marginLeft: 85,
marginRight: 15
},
title: {
useHTML: true,
x: 10,
y: 80,
text: ''
},
series: [{
data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
}],
xAxis: {
style:{
overflow: 'none',
crop : false
},
min:0,
opposite:true,
labels: {
style: {
textOverflow: 'none',
whiteSpace: 'nowrap',
color: '#000000',
fontSize: '11px',
overflow: 'none',
crop : false,
},
gridLineWidth: 1,
groupedOptions: [ {
rotation: 0, // rotate labels for a 2nd-level
y:10,
}],
rotation: -90 // 0-level options aren't changed, use them as always
},
categories: [{
name: "Fruiqweqw ewqeqwet",
categories: ["Appleasd asdadd", "Bananaasd asdsa", "Orange asdad"]
}, {
name: "Vegetableasdasd",
categories: ["Carrot asd", "Potato sdf", "Tomato"]
}, {
name: "Fishqwewewqewq",
categories: ["Codasdsa", "Salmonasd", "Tuna"]
}]
}
});
});
The labels in the x axis are currently overflowing the space provided. I have many labels in my actual project, so fixing the width is not an ideal solution. Any suggestions on how to handle this?