Version: 1.2.0

Legends

Legends are representations of the data entries in a dataset, legends are mostly used to represent data keys of a dataset plotted in a chart.

Live Editor

Usage

1 . Import Legends component after installation.

import { Legends } from "@k2/ui";

2 . Add data to Legends component.

<Legends data={LegendData} />

Examples

Basic Legends: Demo

<Legends
  data={[
    {
      name: "legend 1",
      color: "red",
      enabled: true,
    },
    {
      name: "legend 2",
      color: "green",
      enabled: false,
    },
    {
      name: "legend 3",
      color: "blue",
      enabled: true,
    },
    {
      name: "legend 4",
      color: "pink",
      enabled: true,
    },
    {
      name: "legend 5",
      color: "orange",
      enabled: true,
    },
    {
      name: "legend 6",
      color: "black",
      enabled: true,
    },
  ]}
/>

Legends without symbols: Demo

<Legends
  data={[
    {
      name: "legend 1",
      color: "red",
      enabled: true,
    },
    {
      name: "legend 2",
      color: "green",
      enabled: false,
    },
    {
      name: "legend 3",
      color: "blue",
      enabled: true,
    },
    {
      name: "legend 4",
      color: "pink",
      enabled: true,
    },
    {
      name: "legend 5",
      color: "orange",
      enabled: true,
    },
    {
      name: "legend 6",
      color: "black",
      enabled: true,
    },
  ]}
  symbol={false}
/>

Legends with square symbol: Demo

<Legends
  data={[
    {
      name: "legend 1",
      color: "red",
      enabled: true,
    },
    {
      name: "legend 2",
      color: "green",
      enabled: false,
    },
    {
      name: "legend 3",
      color: "blue",
      enabled: true,
    },
    {
      name: "legend 4",
      color: "pink",
      enabled: true,
    },
    {
      name: "legend 5",
      color: "orange",
      enabled: true,
    },
    {
      name: "legend 6",
      color: "black",
      enabled: true,
    },
  ]}
  symbolShape="square"
/>

Click here for more variations of legends.

Props

Property	Type	Required	Default value	Description
data	Array<LegendData>	yes	None	Data for Legends
onClick	(legend: LegendData) => void;	no	None	Click handler of Legends
symbol	boolean \| JSX.Element \| HTMLElement	no	true	Symbol for Legends
overflow	"auto" \| "scroll" \| "hidden" \| "none"	no	"auto"	To handle overflow of legends
direction	"row" \| "column"	no	"row"	Direction of legends
symbolShape	"circle" \| "square"	no	"circle"	Shape of Symbol
color	string	no	"#ccc"	Color of Symbol
className	string	no	None	Class applied to the root element of Legends
classes	Classes	no	None	Class applied to the root element of Legends
style	CSSProperties	no	None	Styles applied to the root element of Legends

Note: K2 Components that are using Legends will handle data and onClick event internally. data and onClick are required only when using Legends independently or with some component out of k2.

Custom Types

LegendData

Here is the format of the data accepted by a Legends component.

type Legend = {
  name: string;
  color?: string;
  symbol?: boolean | JSX.Element | HTMLElement;
  enabled: boolean;
}

Classes

Classes enable customization and styling of Legends elements throught their classes.

ClassName	Type	Default value	Description
root	string	None	Applied to root element of Legends.
item	string	None	Applied to item of Legends.
symbol	string	None	Applied to symbol of Legends.
value	string	None	Applied to value of Legends.

Please see Class Specificity for correctly defining it.

Usage#

Examples#

Props#

Custom Types#

LegendData#