So I am creating a doughnut chart, using HighCharts. In which I want to customise the legends according to the following reference image:
And here is the image I could generate:
SO the first image is reference image and the second I generated with the follwing code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donut Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style id="compiled-css" type="text/css">
div.g_Container{
position: relative;
width: 1000px;
height: 900px;
}
</style>
</head>
<body>
<div >
<div id="g_one"></div>
</div>
<script>
Highcharts.chart('g_one', {
chart: {
plotBackgroundColor: null,
// spacingLeft: 5,
plotShadow: false,
width: 536,
height: 194,
align: 'left',
// x:-40,
// y:75
},
title: {
text : '',
},
credits: {
enabled: false
},
exporting:{
width: 536,
height: 194,
align: 'left',
// x: -10
},
plotOptions: {
pie: {
slicedOffset: 2,
dataLabels: {
enabled: false,
},
startAngle: 100,
endAngle: 100,
showInLegend : true,
}
},
series: [{
type: 'pie',
// name, percentage of data, color, slicing is need or not//
keys: ['name', 'y', 'color', 'sliced'],
size: 168,
innerSize: 112,
// give data name, percentage the data occupies, color to represent the data//
data: [
['Eateris', 10 ,'#22306b', true],
['General payments', 10, '#000000', true],
['Shoping',10, '#9ca4be', true],
['Travel and Transort', 10, '#e1808b', true],
['Pastimes', 10, '#6d7272', true],
['Family and home', 10, '#6298bf', true],
['Utilities', 10, '#4a548e', true],
['Health and beauty', 10, '#ab4735', true],
['Groceries', 10, '#5e7ab9', true],
['Groups and charity', 10, '#d0d1d0', true],
],
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
align: 'right',
verticalAlign: 'middle',
horizontalAlign: 'left',
height: 800,
width: 260,
// itemHeight: 50,
itemWidth:90,
itemStyle: {
font: 'Sans Serif Regular',
fontSize: 8,
// paddingBottom: 5
},
labelFormatter: function() {
return '<span style="color: ' this.color '">' this.name '</span>';},
itemHoverStyle: {
color: '#444'
},
symbolHeight: 10,
}
});
</script>
</body>
</html>
What I am trying to achieve is, there should be horizontal gaps between the legend items, and the legend texts should come in 2 columns and 5 rows. I have given the width according to that, so that the legends are getting divided into two columns. But there is a lot of space which remains after the second column of the legend, but yet the legend's text is not coming properly. Thanks in advance
CodePudding user response：
Basically you're trying to add some margin to the legends at bottom and you dont want text wrap on the legends.
I suggest you increase your width on the legend.width and set legend.itemWidth to half of it to achieve your 2 column format.
Now coming to margin-bottom
legend.itemMarginBottom can be used to achieve it.
The pixel bottom margin for each legend item.
Defaults to 0.
Lastly the text overflow:
legend.itemStyle.textOverflow : null
Line break style of the element text. Highcharts SVG elements support ellipsis when a width is set.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donut Chart</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style id="compiled-css" type="text/css">
div.g_Container {
position: relative;
width: 1000px;
height: 900px;
}
</style>
</head>
<body>
<div >
<div id="g_one"></div>
</div>
<script>
Highcharts.chart('g_one', {
chart: {
plotBackgroundColor: null,
// spacingLeft: 5,
plotShadow: false,
width: 536,
height: 194,
align: 'left',
// x:-40,
// y:75
},
title: {
text: '',
},
credits: {
enabled: false
},
exporting: {
width: 536,
height: 194,
align: 'left',
// x: -10
},
plotOptions: {
pie: {
slicedOffset: 2,
dataLabels: {
enabled: false,
},
startAngle: 100,
endAngle: 100,
showInLegend: true,
}
},
series: [{
type: 'pie',
// name, percentage of data, color, slicing is need or not//
keys: ['name', 'y', 'color', 'sliced'],
size: 168,
innerSize: 112,
// give data name, percentage the data occupies, color to represent the data//
data: [
['Eateris', 10, '#22306b', true],
['General payments', 10, '#000000', true],
['Shoping', 10, '#9ca4be', true],
['Travel and Transort', 10, '#e1808b', true],
['Pastimes', 10, '#6d7272', true],
['Family and home', 10, '#6298bf', true],
['Utilities', 10, '#4a548e', true],
['Health and beauty', 10, '#ab4735', true],
['Groceries', 10, '#5e7ab9', true],
['Groups and charity', 10, '#d0d1d0', true],
],
showInLegend: true,
dataLabels: {
enabled: false
}
}],
legend: {
align: 'right',
verticalAlign: 'middle',
horizontalAlign: 'left',
height: 800,
width: 300,
itemWidth: 150,
// itemHeight: 50,
// itemWidth: 90,
itemStyle: {
font: 'Sans Serif Regular',
fontSize: 8,
textOverflow: null,
// paddingBottom: 5
},
labelFormatter: function() {
console.log(this.name)
return '<span style="color: ' this.color '">' this.name '</span>';
},
itemHoverStyle: {
color: '#444'
},
symbolHeight: 10,
itemMarginBottom: 5,
}
});
</script>
</body>
</html>