> ## Documentation Index > Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt > Use this file to discover all available pages before exploring further. # chart:legend export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { const timer = setTimeout(() => { setIsLoaded(true); }, 500); return () => clearTimeout(timer); }, []); return
{isLoaded && ` }} />} Powered by Lucidworks Agent Studio
; }; [localhost link]: http://localhost:3000/docs/4/app-studio/reference/tags/lightning.directive.chartLegend [mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.chartLegend [old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1112 ## Description A legend is displayed when the chart has multiple series, with the Chart Legend tag you can customise the legend with a title, border and location on the chart along with other things. This tag must be nested in the [Chart Display tag](/docs/4/app-studio/reference/tags/lightning.directive.chartDisplay). ## Usage as element: ```xml wrap theme={"dark"} ``` ### Directive info * This directive creates new scope. #### Parameters | Param | Type | Details | | ---------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | title *(optional)* | **string** | The title of the legend. | | align *(optional)* | **string** | The horizontal alignment of the legend box within the chart area. Valid values are 'left', 'center' and 'right'. | | vertical-align *(optional)* | **string** | The vertical alignment of the legend box. Valid values are 'top', 'middle' or 'bottom'. | | layout *(optional)* | **string** | The layout of the legend items. Can be one of 'horizontal' or 'vertical'. | | x *(optional)* | **string** | The x offset of the legend relative to its horizontal alignment 'align'. Negative x moves it to the left, positive x moves it to the right. | | y *(optional)* | **string** | The vertical offset of the legend relative to it’s vertical alignment 'verticalAlign'. Negative y moves it up, positive y moves it down. | ## Example #### Source ```xml wrap expandable theme={"dark"}

Legend

Legend on the Right

Legend on the Left

Legend on the Bottom

Adding a Border

Add an ID or class to the element wrapping your chart and configure the stroke width to add a border and the value rx to modify the border radius.

.chart-with-legend-border .highcharts-legend-box {
    fill: none;
    stroke-width: 1px;
    stroke: black;
    rx:2;
}
``` ```css wrap theme={"dark"} .chart-with-legend-border .highcharts-legend-box { fill: none; stroke-width: 1px; stroke: black; rx:2; } ``` ```js wrap expandable theme={"dark"} angular.module('lightning') .controller('ExampleController', ['$scope','$timeout','ResponseService', function($scope,$timeout, ResponseService) { $scope.response = { page: 2, query: { rpp: 50 }, facets: { test1: { filters: [ { val: { dsp: 'Day 1', act: 'Day 1', }, count: 100, }, { val: { dsp: 'Day 2', act: 'Day 2', }, count: 200, } ] }, test2: { filters: [ { val: { dsp: 'Day 1', act: 'Day 1', }, count: 10, }, { val: { dsp: 'Day 2', act: 'Day 2', }, count: 20, } ] }, }, results: [ { result: { fields: { label: 'label1', value: 1 } }, }, { result: { fields: { label: 'label2', value: 2 } }, hits: { act: ['Hits', 264] } }] } ResponseService.setResponse('response',$scope.response); }]); ``` #### Result Result