Legend
A Legend displays color coded UI elements matching charted signals, helping handle user-interactions like highlighting or visibility toggles.
![Screenshot of component Legend overview](/static/b1470f8587995b2e90a2dca82b6acd1b/Legend-overview-desktop.png)
Usage
The Legend component is used alongside the useLegend
hook.
Legend
renders as a Blueprint Tag
and can behave as a Button for user-interaction. When multiple entries are used, hovering over a Legend element will dim other charts to help highlight the user's selection.
![Screenshot of component Legend basic](/static/24ac0107b5d589ca256cd1565b3a2131/Legend-basic-desktop.png)
In this minimal example, a single LineChart is rendered with connections to the Legend data. Clicking on the Legend
tag will toggle visibility of the LineChart
.
Remember: The
Legend
component is used outside of theChartContainer
to allow the most control over positioning behaviour.
import { Legend } from '@electricui/components-desktop-blueprint-timeseries'import { ChartContainer , LineChart , RealTimeDomain , useLegend } from '@electricui/components-desktop-charts'import { useMessageDataSource } from '@electricui/core-timeseries'import { Colors } from '@blueprintjs/core' const OverviewPage = () => { const dataSourceA = useMessageDataSource ('adc') const legendData = useLegend ({ dataA : { name : 'Data A', color : Colors .RED3 , } }) return( <div > <Legend data ={legendData } /> <ChartContainer > <LineChart dataSource ={dataSourceA } color ={legendData .dataA .color } opacitySource ={legendData .dataA .opacity } visibilitySource ={legendData .dataA .visible } /> <RealTimeDomain window ={10000} /> </ChartContainer > </div > ) }
The component will automatically tile entries horizontally based on the contents provided via the data
prop.
noHover
Add the noHover
prop, or set it to false to disable hover highlighting.
<Legend data ={legendData } noHover />
noToggle
Add the noToggle
prop to disable the Button functionality which allows toggling the controlled Chart element's visibility.
<Legend data ={legendData } noToggle />
Justification
Provide the justifyContent
prop with a valid CSSProperties matching justifyContent
to control horizontal positioning.
Typical options include: start
, center
, end
, left
, right
, space-around
.
![Screenshot of component Legend justification](/static/019470abd63db46f55f2c8a775ba4fb1/Legend-justification-desktop.png)
<Legend data ={legendData } justifyContent ="start" /><Legend data ={legendData } justifyContent ="center" /><Legend data ={legendData } justifyContent ="end" />
Orientation
The boolean vertical
prop can be added to change the layout strategy to vertical tiling.
![Screenshot of component Legend vertical](/static/89eef4a1535152380daa723ee85f6adf/Legend-vertical-desktop.png)
<Legend data ={legendData } vertical />