Hello,
I am trying to put a vertical legend on the left side of the chart with
overflow set to "Break". If you put the below code into your web browser
example page and shrink the page size, you will see that the text runs off the
screen at some point. This happens because the legend.textStyle.width does not
work with percentages. What is the proper way to keep the legend from
overlapping the graph, have the text wrap and not run off the window?
option = {
title: {
text: 'World Population'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {type: "scroll",
show: true,
width: "20%",
textStyle: {
width: 175,
overflow:
"break",
},
orient: "vertical",
left: "80%",
right: "5%",
top: 20,
bottom: 20,
},
grid: {
left: "5%",
top: "15%",
right: "20%",
bottom: "5%",
width: "auto",
height: "auto",
containLabel: true,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
name: '2011 this is a really long litelkhjasdf asdf sdf',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012 daf asdf dasf asdf asfd',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
Stephen Rich
Managing Partner | BRI, LLC |
www.bri-associates.com<http://www.bri-associates.com/> | +1 (503) 853-4656
[BRI Logo-Padded]<https://www.bri-associates.com/>[FB
Logo-Padded]<https://business.facebook.com/BRI.associates/>[LinkedIn
Logo-Padded]<https://www.linkedin.com/company/bri-associates/>[Twitter
Logo-Padded]<https://twitter.com/BRI_Associates>[YouTube
Logo-Padded]<https://www.youtube.com/channel/UC7R9oAqHexxksDzy87RoTSQ>
