[GitHub] ayesha-omarali opened a new issue #9080: Scroll Legend cuts off top half of text

[GitBox]

ayesha-omarali opened a new issue #9080: Scroll Legend cuts off top half of text
URL: https://github.com/apache/incubator-echarts/issues/9080
 
 
   
   ### 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:
   
![image](https://user-images.githubusercontent.com/10991288/45575158-55f2a200-b827-11e8-847d-bdd3abc4987a.png)
   
   
   
   
   ### 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>
   ```
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscr...@echarts.apache.org
For additional commands, e-mail: dev-h...@echarts.apache.org