I am using highcharts. Everything seems fine but I am not sure how to make the series text (LLLL! LLLL! LLLL!, XYZM XYZM XYZM XYZM) responsive/ wrap text depending upon the screen size? Right now, if I minimize the screen, the text overlaps on each other. Is there a way to make the text wrap instead of overlapping? Here is my code.
// container7
var chartOptions = {
chart: {
type: 'column',
inverted: true,
height: 200
},
title: {
text: ''
},
xAxis: {
lineColor: 'white',
categories: ['ABCD'],
labels: {
padding: 40, // Add padding of 40 to the x-axis labels
style: {
fontSize: '12px' // Adjust the font size as needed
}
}
},
yAxis: {
allowDecimals: false,
max: 100,
title: {
text: ''
},
labels: {
enabled: false // Hide y-axis labels
},
gridLineWidth: 0 // Remove grid lines
},
plotOptions: {
column: {
stacking: 'normal', // this will be our default
dataLabels: {
enabled: true,
style: {
color: 'black', // Set font color to black
fontSize: '13px', // Set font size to 12px
textShadow: 'none' // Remove text shadow
},
backgroundColor: 'rgba(0, 0, 0, 0)', // Set background color to transparent
formatter: function() {
return this.series.name + ': ' + Highcharts.numberFormat(this.y, 0) + '%';
}
}
}
},
colors: ['#d37295', '#fabfd2'],
series: [{
name: 'LLLL!LLLL!LLLL!LLLL!LLLL!LLLL!LLLL!',
data: [57]
}, {
name: 'XYZM XYZMXYZMXYZMXYZM XYZMXYZM XYZM XYZM',
data: [43]
}],
legend: {
enabled: false // Hide the legend
},
credits: {
enabled: false // Hide the credits
}
};
// Render the chart using Highcharts
Highcharts.chart('container7', chartOptions);
<script src="https://code.highcharts.com/highcharts.js"></script>
<h2>... look like this:</h2>
<div id="container7" style=" border: 1px solid lightgray;"></div>