Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

When I hide 'legend', it still as a block element use space

See original GitHub issue

Version

4.8.0

Steps to reproduce

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>线路拥挤程度</title>
    <script src="https://cdn.bootcss.com/echarts/4.8.0/echarts.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
		* {
			margin: 0,
			padding: 0
		}
		
		body {
			font-family: SimSun;
			margin: 0,
			padding: 0
		}
		
		#main {
			margin: 0,
			padding: 0
		
		}
        
    </style>
</head>
<body>
<div id="main" style="width:360px;height:280px; border:1px solid #12aded;margin: 0; padding: 0;"></div>
</body>

<script type="text/javascript">
    let myChart =null;
    window.onload = function(){
	
		
		myChart = echarts.init(document.getElementById('main'), null, {renderer: 'canvas'});
		
		let option = {
			legend: {
			    /***
				
				English: I don't want display legend, so I just set 'show' field to 'false'. but it still use some space, although it was hidden.
				Chinese: 我不想显示legend元素，我就把"show"字段设置成false, 尽管它确实隐藏了，但是我发现它还是占用了空间。
				
				Expect:
					怎么样实现既隐藏掉，又可以不占用空间呢？
				
				**/
				show: true,
				selectedMode: 'single',
				data: ["线路拥挤程度"],
				backgroundColor:'#12aded',
				borderColor:'red',
				borderWidth: 2,
				height: 0,
				itemHeight: 0,
				padding: 0,
				left:'50%',
				bottom: 15
			},
			radar: {
				shape: 'polygon',// polygon or circle
				indicator: [
					{ name: '线路1', max: 100},
					{ name: '线路2', max: 100},
					{ name: '线路3', max: 100},
					{ name: '线路4', max: 100},
					{ name: '线路5', max: 100}
				]
			},
			series: [{
				name: '线路拥挤程度',
				type: 'radar',
				data: [
					{
						value: [50, 13, 70, 75, 90],
						name: '线路拥挤程度',
					}
				],

			}]
		};
		
		myChart.setOption(option);
	
	};

</script>
</html>

What is expected?

English: How to make legend element don’t use space when I set legend.show to ‘false’ Chinese: 怎么样实现既隐藏掉legend，又可以不占用空间呢？

What is actually happening?

legend was hidden, but it still use space, like there is a placeholder inside the canvas.

none

Issue Analytics

State:
Created 3 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

pissangcommented, Jan 12, 2021

As I said, the legend component won’t affect the layout. The blank area is caused by the grid component top config. You can set it to a smaller value like 10

0reactions

JueLancecommented, Jan 14, 2021

Since I can use below fields move radar graph to keep it in center inside of canvas, I can solve my problems, I close my issue.

https://echarts.apache.org/zh/option.html#radar.center https://echarts.apache.org/zh/option.html#radar.radius

Top Results From Across the Web

Hide HTML form legend using CSS - Stack Overflow

If the answer is simply to satisfy the HTML specs, use display:none and be done with it - don't hinder the user experience...

Block-level elements - HTML: HyperText Markup Language

A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its ...

Legend appearance and behavior - MATLAB - MathWorks

Legend properties control the appearance and behavior of a Legend object. By changing property values, you can modify certain aspects of the legend....

Fighting the Space Between Inline Block Elements | CSS-Tricks

Remove the spaces · Negative margin · Skip the closing tag · Set the font size to zero · Just float them instead...

Legend | Chart.js

When using the 'chartArea' option the legend position is at the moment not configurable, it will always be on the left side of...