text: (window.webpackJsonp=window.webpackJsonp||[]).push([[36],{177:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return r})),n.d(t,"metadata",(function(){return i})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return o}));var a=n(1),l=n(9),b=(n(0),n(201)),r={title:"Legend"},i={id:"configuration/legend",title:"Legend",description:"The chart legend displays data about the datasets that are appearing on the chart.",source:"@site/docs/configuration/legend.md",permalink:"/docs/master/configuration/legend",editUrl:"https://github.com/chartjs/Chart.js/edit/master/docs/docs/configuration/legend.md",sidebar:"someSidebar",previous:{title:"Layout",permalink:"/docs/master/configuration/layout"},next:{title:"Title",permalink:"/docs/master/configuration/title"}},c=[{value:"Configuration options",id:"configuration-options",children:[]},{value:"Position",id:"position",children:[]},{value:"Align",id:"align",children:[]},{value:"Legend Label Configuration",id:"legend-label-configuration",children:[]},{value:"Legend Title Configuration",id:"legend-title-configuration",children:[]},{value:"Legend Item Interface",id:"legend-item-interface",children:[]},{value:"Example",id:"example",children:[]},{value:"Custom On Click Actions",id:"custom-on-click-actions",children:[]}],d={rightToc:c};function o(e){var t=e.components,n=Object(l.a)(e,["components"]);return Object(b.b)("wrapper",Object(a.a)({},d,n,{components:t,mdxType:"MDXLayout"}),Object(b.b)("p",null,"The chart legend displays data about the datasets that are appearing on the chart."),Object(b.b)("h2",{id:"configuration-options"},"Configuration options"),Object(b.b)("p",null,"The legend configuration is passed into the ",Object(b.b)("inlineCode",{parentName:"p"},"options.legend")," namespace. The global options for the chart legend is defined in ",Object(b.b)("inlineCode",{parentName:"p"},"Chart.defaults.legend"),"."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Default"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"display")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"true")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Is the legend shown?")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"position")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"'top'")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Position of the legend. ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#position"}),"more..."))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"align")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"'center'")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Alignment of the legend. ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#align"}),"more..."))),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fullWidth")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"true")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"onClick")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"function")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A callback that is called when a click event is registered on a label item.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"onHover")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"function")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A callback that is called when a 'mousemove' event is registered on top of a label item.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"onLeave")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"function")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"reverse")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"false")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Legend will show datasets in reverse order.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"labels")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"See the ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#legend-label-configuration"}),"Legend Label Configuration")," section below.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"rtl")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"true")," for rendering the legends from right to left.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"textDirection")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"canvas' default"),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"This will force the text direction ",Object(b.b)("inlineCode",{parentName:"td"},"'rtl' or "),"'ltr' on the canvas for rendering the legend, regardless of the css specified on the canvas")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"title")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"See the ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#legend-title-configuration"}),"Legend Title Configuration")," section below.")))),Object(b.b)("h2",{id:"position"},"Position"),Object(b.b)("p",null,"Position of the legend. Options are:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'top'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'left'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'bottom'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'right'"))),Object(b.b)("h2",{id:"align"},"Align"),Object(b.b)("p",null,"Alignment of the legend. Options are:"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'start'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'center'")),Object(b.b)("li",{parentName:"ul"},Object(b.b)("inlineCode",{parentName:"li"},"'end'"))),Object(b.b)("p",null,"Defaults to ",Object(b.b)("inlineCode",{parentName:"p"},"'center'")," for unrecognized values."),Object(b.b)("h2",{id:"legend-label-configuration"},"Legend Label Configuration"),Object(b.b)("p",null,"The legend label configuration is nested below the legend configuration using the ",Object(b.b)("inlineCode",{parentName:"p"},"labels")," key."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Default"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boxWidth")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"number")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"40")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Width of coloured box.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontSize")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"number")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"12")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Font size of text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontStyle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"'normal'")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Font style of text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontColor")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Color")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"'#666'")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Color of text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontFamily")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"\"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\"")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Font family of legend text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"padding")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"number")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"10")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Padding between rows of colored boxes.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"generateLabels")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"function")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#legend-item-interface"}),"Legend Item")," for details.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"filter")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"function")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"null")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Filters legend items out of the legend. Receives 2 parameters, a ",Object(b.b)("a",Object(a.a)({parentName:"td"},{href:"#legend-item-interface"}),"Legend Item")," and the chart data.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"usePointStyle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"false")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Label style will match corresponding point style (size is based on the mimimum value between boxWidth and fontSize).")))),Object(b.b)("h2",{id:"legend-title-configuration"},"Legend Title Configuration"),Object(b.b)("p",null,"The legend title configuration is nested below the legend configuration using the ",Object(b.b)("inlineCode",{parentName:"p"},"title")," key."),Object(b.b)("table",null,Object(b.b)("thead",{parentName:"table"},Object(b.b)("tr",{parentName:"thead"},Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Name"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Type"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Default"),Object(b.b)("th",Object(a.a)({parentName:"tr"},{align:null}),"Description"))),Object(b.b)("tbody",{parentName:"table"},Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"display")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"boolean")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"false")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Is the legend title displayed.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontSize")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"number")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"12")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Font size of text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontStyle")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"'normal'")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Font style of text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontColor")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"Color")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"'#666'")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Color of text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"fontFamily")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"\"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\"")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Font family of legend text.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"lineHeight")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"number")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Line height of the text. If unset, is computed from the font size.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"padding")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("code",null,"number","|","object")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"0")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"Padding around the title. If specified as a number, it applies evenly to all sides.")),Object(b.b)("tr",{parentName:"tbody"},Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"text")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),Object(b.b)("inlineCode",{parentName:"td"},"string")),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null})),Object(b.b)("td",Object(a.a)({parentName:"tr"},{align:null}),"The string title.")))),Object(b.b)("h2",{id:"legend-item-interface"},"Legend Item Interface"),Object(b.b)("p",null,"Items passed to the legend ",Object(b.b)("inlineCode",{parentName:"p"},"onClick")," function are the ones returned from ",Object(b.b)("inlineCode",{parentName:"p"},"labels.generateLabels"),". These items must implement the following interface."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"{\n    // Label that will be displayed\n    text: string,\n\n    // Fill style of the legend box\n    fillStyle: Color,\n\n    // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect\n    hidden: boolean,\n\n    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap\n    lineCap: string,\n\n    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash\n    lineDash: number[],\n\n    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset\n    lineDashOffset: number,\n\n    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin\n    lineJoin: string,\n\n    // Width of box border\n    lineWidth: number,\n\n    // Stroke style of the legend box\n    strokeStyle: Color,\n\n    // Point style of the legend box (only used if usePointStyle is true)\n    pointStyle: string | Image,\n\n    // Rotation of the point in degrees (only used if usePointStyle is true)\n    rotation: number\n}\n")),Object(b.b)("h2",{id:"example"},"Example"),Object(b.b)("p",null,"The following example will create a chart with the legend enabled and turn all of the text red in color."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var chart = new Chart(ctx, {\n    type: 'bar',\n    data: data,\n    options: {\n        legend: {\n            display: true,\n            labels: {\n                fontColor: 'rgb(255, 99, 132)'\n            }\n        }\n    }\n});\n")),Object(b.b)("h2",{id:"custom-on-click-actions"},"Custom On Click Actions"),Object(b.b)("p",null,"It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object."),Object(b.b)("p",null,"The default legend click handler is:"),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"function(e, legendItem) {\n    var index = legendItem.datasetIndex;\n    var ci = this.chart;\n    var meta = ci.getDatasetMeta(index);\n\n    // See controller.isDatasetVisible comment\n    meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;\n\n    // We hid a dataset ... rerender the chart\n    ci.update();\n}\n")),Object(b.b)("p",null,"Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly."),Object(b.b)("pre",null,Object(b.b)("code",Object(a.a)({parentName:"pre"},{className:"language-javascript"}),"var defaultLegendClickHandler = Chart.defaults.legend.onClick;\nvar newLegendClickHandler = function (e, legendItem) {\n    var index = legendItem.datasetIndex;\n\n    if (index > 1) {\n        // Do the original logic\n        defaultLegendClickHandler(e, legendItem);\n    } else {\n        let ci = this.chart;\n        [\n            ci.getDatasetMeta(0),\n            ci.getDatasetMeta(1)\n        ].forEach(function(meta) {\n            meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;\n        });\n        ci.update();\n    }\n};\n\nvar chart = new Chart(ctx, {\n    type: 'line',\n    data: data,\n    options: {\n        legend: {\n            onClick: newLegendClickHandler\n        }\n    }\n});\n")),Object(b.b)("p",null,"Now when you click the legend in this chart, the visibility of the first two datasets will be linked together."))}o.isMDXComponent=!0},201:function(e,t,n){"use strict";n.d(t,"a",(function(){return O})),n.d(t,"b",(function(){return m}));var a=n(0),l=n.n(a);function b(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,a,l=function(e,t){if(null==e)return{};var n,a,l={},b=Object.keys(e);for(a=0;a<b.length;a++)n=b[a],t.indexOf(n)>=0||(l[n]=e[n]);return l}(e,t);if(Object.getOwnPropertySymbols){var b=Object.getOwnPropertySymbols(e);for(a=0;a<b.length;a++)n=b[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(l[n]=e[n])}return l}var d=l.a.createContext({}),o=function(e){var t=l.a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):i({},t,{},e)),n},O=function(e){var t=o(e.components);return l.a.createElement(d.Provider,{value:t},e.children)},j={inlineCode:"code",wrapper:function(e){var t=e.children;return l.a.createElement(l.a.Fragment,{},t)}},p=Object(a.forwardRef)((function(e,t){var n=e.components,a=e.mdxType,b=e.originalType,r=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),O=o(n),p=a,m=O["".concat(r,".").concat(p)]||O[p]||j[p]||b;return n?l.a.createElement(m,i({ref:t},d,{components:n})):l.a.createElement(m,i({ref:t},d))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var b=n.length,r=new Array(b);r[0]=p;var i={};for(var c in t)hasOwnProperty.call(t,c)&&(i[c]=t[c]);i.originalType=e,i.mdxType="string"==typeof e?e:a,r[1]=i;for(var d=2;d<b;d++)r[d]=n[d];return l.a.createElement.apply(null,r)}return l.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"}}]);