### One-line summary [问题简述]
Legend with type:scroll enabled cuts off half of my text -- not related to grid
values or height/width values.
Legend is shown on top of chart with false values to demonstrate error:
### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]: "^4.1.0",
+ Browser version [浏览器类型和版本]: Chrome 68
+ OS Version [操作系统类型和版本]: 10.13.1
### Expected behaviour [期望结果]
- show full text
### ECharts option [ECharts配置项]
This is how my Legend component is constructed:
```
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legendScroll';
export default function Legend(props = {}) {
return {
show: true,
type: 'scroll',
formatter: function(name) {
if (name.length > 80) {
return name.substring(0, 80) + '...';
} else {
return name;
}
},
...props,
};
}
```
and this is how I use Legend component in my chart component:
```
option={{
...options,
color: colors || this.getColorPalette(),
grid: Grid(grid),
tooltip: tooltip !== null ? Tooltip({isGroupedByDate, ...tooltip}) :
null,
legend: showLegend && legend ? Legend(legend) : null,
yAxis: yAxis !== null ? YAxis(yAxis) : null,
xAxis:
xAxis !== null
? XAxis({
...xAxis,
isGroupedByDate,
})
: null,
series: !previousPeriod
? series
: [
...series,
LineSeries({
name: previousPeriod.seriesName,
data: previousPeriod.data.map(({name, value}) => [name,
value]),
lineStyle: {
color: theme.gray1,
type: 'dotted',
},
}),
],
}}
```
and the screenshot is rendered with this code below:
```
<div style={{backgroundColor: "white", padding: {12}}}>
<LineChart
series={[
{
seriesName: text('Line 1',
'Line1Line1Line1Line1Line1Line1Line1Line1'),
data: [
{value: 18, name: 'Aug 15th'},
{value: 31, name: 'Aug 16th'},
{value: 9, name: 'Aug 22nd'},
{value: 100, name: 'Sep 5th'},
{value: 12, name: 'Sep 6th'},
],
},
{
seriesName: text('Line 2',
'Line2Line2Line2Line2Line2Line2Line2Line2Line2'),
data: [
{value: 84, name: 'Aug 15th'},
{value: 1, name: 'Aug 16th'},
{value: 28, name: 'Aug 22nd'},
{value: 1, name: 'Sep 5th'},
{value: 1, name: 'Sep 6th'},
],
},
{
seriesName: text('Line 3', 'browser'),
data: [
{value: 108, name: 'Aug 15th'},
{value: 1, name: 'Aug 16th'},
{value: 36, name: 'Aug 22nd'},
{value: null, name: 'Sep 5th'},
{value: 1, name: 'Sep 6th'},
],
},
]}
showLegend
tooltip={{filter: {filter()}, truncate: 80}}
legend={{data:
["sentry:usersentry:usersentry:usersentry:usersentry…",
"environmentenvironmentenvironmentenvironmentenviro…", "browser"]}}
height={300}
grid={{top: "44", bottom: {40}, left: "10%", right: '10%'}}
/>
</div>
```
[ Full content available at:
https://github.com/apache/incubator-echarts/issues/9080 ]
This message was relayed via gitbox.apache.org for [email protected]
