> ## 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. # series:facet 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.seriesFacet [mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/reference/tags/lightning.directive.seriesFacet [old doc.lw link]: https://doc.lucidworks.com/app-studio/4.2/1165 ## Description To render information in facets use the Series Facet tag, has to be nested within a [Chart Display tag](/docs/4/app-studio/reference/tags/lightning.directive.chartDisplay). You can use the `response` attribute to load the data from the response or alternatively you can add a platform and this will get only the data the series needs to be rendered. You will also need to include the `query` directly on this tag if you wish for the user to be able to filter using the data of this series or alternatively add the `query` to the [Chart Display tag](/docs/4/app-studio/reference/tags/lightning.directive.chartDisplay). For detail on how to change the color and background color see the demo below, for more detail on what you can change and set using CSS see [here.](http://www.highcharts.com/docs/chart-design-and-style/style-by-css) ## Usage as element: ```xml wrap theme={"dark"} ``` ### Directive info * This directive creates new scope. #### Parameters | Param | Type | Details | | --------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | response | **object** | A response object (please include either a response or a platform not both!). | | platform | **string** | The name of the platform to get the data from (please include either a response or a platform not both!). | | name | **string** | Name of facet. | | type | **string** | Chart type | | title *(optional)* | **string** | The title of the series that appears in the legend and tooltip. | | show-marker *(optional)* | **string** | Whether to show marker or not. | | number-to-show *(optional)* | **number** | Number of filters to render on the graph. | | action *(optional)* | **string** | The page/action to which clicking the chart should be submitted. By default the action points to the current page. | | query *(optional)* | **object** | The search query from which to build links. | | date-format *(optional)* | **string** | How to format the date. See #/api/lightning.filter:dateFormat\[date format filter] for valid formats. | | measure *(optional)* | **string** | What fact to use as an alternative to count as quantitative value for a filter. | | selected-by-default *(optional)* | **boolean** | Whether this series should be shown when the chart:display is using select-series="true" mode. Default: true. | | select *(optional)* | **string** | How the data should be filtered when clicking on a part of the chart, a valid query must be present. Valid values:
● **false** User selects a filter by clicking the value; **(default)**
● **multiselect** Supports selecting multiple filters that get combined with an 'OR'.
● **multiselect-instant** Supports selecting multiple filters that get combined with an 'OR', filters will be applied automatically. | ## Example #### Source ```xml wrap expandable theme={"dark"}

Number To Show Attribute

Show Marker Attribute

Colour (since 0.3.0)

Add an ID to the element wrapping your chart and configure the background colour and series colours like so.

    #colour-demo .highcharts-color-0{
    fill:pink;
    stroke:pink;
    }
    #colour-demo .highcharts-color-1{
    fill:yellow;
    stroke:yellow;
    }
    #colour-demo .highcharts-background{
    fill:#f5f0f0;
    }

For more detail on what you can change and set using CSS see here.

``` ```css wrap theme={"dark"} #colour-demo .highcharts-color-0 { fill: pink; stroke: pink; colour-demo .highcharts-color-1 { fill: yellow; stroke: yellow; colour-demo .highcharts-background { fill: #f5f0f0; ``` ```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, } ] }, population:{ filters: [ { val: 'China', count: 1379790000, }, { val: 'India', count: 1330780000, }, { val: 'United States', count: 324897000, }, { val: 'Indonesia', count: 260581000, }, { val: 'Brazil', count: 206927000, }, { val: 'Pakistan', count: 194772000, }, { val: 'Nigeria', count: 186987000, }, { val: 'Bangladesh', count: 161401000, }, { val: 'Russia', count: 146727405, }, { val: 'Japan', count: 126693000, }, ] }, population2000:{ filters: [ { val: 'China', count: 1242612300, }, { val: 'India', count: 1040000000, }, { val: 'United States', count: 281421923, }, { val: 'Indonesia', count: 206264595, }, { val: 'Brazil', count: 170000000, }, { val: 'Pakistan', count: 140000000, }, { val: 'Nigeria', count: 110000000, }, { val: 'Bangladesh', count: 130000000, }, { val: 'Russia', count: 147000000, }, { val: 'Japan', count: 127000000, }, ] }, }, results: [] } ResponseService.setResponse('response', $scope.response); }]); ``` #### Result Result

Result