| __NUXT_JSONP__("/en/concepts/legend", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B){return {data:[{article:{slug:r,toc:[{id:s,depth:p,text:t},{id:u,depth:p,text:v},{id:w,depth:p,text:x},{id:y,depth:p,text:z}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:r},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#legend",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:"Legend"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart."}]},{type:a,value:c},{type:b,tag:q,props:{id:s},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#layout",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:t}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:"}]},{type:a,value:c},{type:b,tag:f,props:{className:[g]},children:[{type:b,tag:"md-live",props:{lang:h,layout:"tb"},children:[{type:a,value:"option = {\n legend: {\n \u002F\u002F Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Use scrollable control if there are many legends."}]},{type:a,value:c},{type:b,tag:f,props:{className:[g]},children:[{type:b,tag:o,props:{lang:h,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['Legend A', 'Legend B', 'Legend C' \u002F* ... *\u002F, , 'Legend x']\n \u002F\u002F ...\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:u},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#style",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:v}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"For dark color background, use a light color for the background layer and text while changing the background to translucent."}]},{type:a,value:c},{type:b,tag:f,props:{className:[g]},children:[{type:b,tag:o,props:{lang:h,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n \u002F\u002F ...\n }\n \u002F\u002F ...\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The color of legend has many ways to design. For different charts, the legend style can be different."}]},{type:a,value:c},{type:b,tag:"img",props:{"max-width":"830",width:A,height:A,src:"images\u002Fdesign\u002Flegend\u002Fcharts_sign_img04.png"},children:[]},{type:a,value:c},{type:b,tag:f,props:{className:[g]},children:[{type:b,tag:o,props:{lang:h,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n icon: 'rect'\n \u002F\u002F ...\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:w},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#interactive",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:x}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:"}]},{type:a,value:c},{type:b,tag:f,props:{className:[g]},children:[{type:b,tag:o,props:{lang:h,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n selected: {\n 'Legend A': true,\n 'Legend B': true,\n 'Legend C': false\n }\n \u002F\u002F ...\n }\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:q,props:{id:y},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#tips",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished."}]},{type:a,value:c},{type:b,tag:f,props:{className:[g]},children:[{type:b,tag:o,props:{lang:h,"line-highlights":d,"file-name":d},children:[{type:a,value:"option = {\n legend: {\n data: [\n {\n name: 'Legend A',\n icon: 'rect'\n },\n {\n name: 'Legend B',\n icon: 'circle'\n },\n {\n name: 'Legend C',\n icon: 'pin'\n }\n ]\n \u002F\u002F ...\n },\n series: [\n {\n name: 'Legend A'\n \u002F\u002F ...\n },\n {\n name: 'Legend B'\n \u002F\u002F ...\n },\n {\n name: 'Legend C'\n \u002F\u002F ...\n }\n ]\n \u002F\u002F ...\n};\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"While there is only one kind of data in the chart, use the chart title rather than the legend to explain it."}]}]},dir:"\u002Fen\u002Fconcepts",path:"\u002Fen\u002Fconcepts\u002Flegend",extension:".md",createdAt:B,updatedAt:B},postPath:"en\u002Fconcepts\u002Flegend"}],fetch:{},mutations:[]}}("text","element","\n","","p","div","nuxt-content-highlight","js","a","true",-1,"span","icon","icon-link","md-code-block",2,"h2","legend","layout","Layout","style","Style","interactive","Interactive","tips","Tips","80%","2021-08-02T05:33:02.867Z"))); |