| (window.webpackJsonp=window.webpackJsonp||[]).push([[57],{351:function(n,e,t){"use strict";t.r(e),e.default="# Legend\n\nLegends 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.\n\n## Layout\n\nLegend 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:\n\n```js live\noption = {\n legend: {\n // 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```\n\nUse scrollable control if there are many legends.\n\n```js\noption = {\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' /* ... */, , 'Legend x']\n // ...\n }\n // ...\n};\n```\n\n## Style\n\nFor dark color background, use a light color for the background layer and text while changing the background to translucent.\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n```\n\nThe color of legend has many ways to design. For different charts, the legend style can be different.\n\n<img max-width=\"830\" width=\"80%\" height=\"80%\" src=\"images/design/legend/charts_sign_img04.png\" />\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n```\n\n## Interactive\n\nDepend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:\n\n```js\noption = {\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 // ...\n }\n // ...\n};\n```\n\n## Tips\n\nThe legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.\n\n```js\noption = {\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 // ...\n },\n series: [\n {\n name: 'Legend A'\n // ...\n },\n {\n name: 'Legend B'\n // ...\n },\n {\n name: 'Legend C'\n // ...\n }\n ]\n // ...\n};\n```\n\nWhile there is only one kind of data in the chart, use the chart title rather than the legend to explain it.\n"}}]); |