Skip to main content

Legend

Legend is an component that describes each of Series of the Plot, it's also used to interact with them.

Restriction

  • In order to add a Serie in Legend you must specify its label
  • It's not possible to set top and bottom, left and right offsets at the same time

Props

  • position: determines Legend position in the plot
    type: 'top' | 'bottom' | 'left' | 'right'| 'embedded'
    default: 'embedded'

    embeded
    top
    bottom
    left
    right
  • margin: adds spacing out of legend
    type: number
    default: 10

  • onClick: Creates a callback when clicking to one of legend's elements, event: MouseEvent data, id: id of clicked serie
    type: (args: {event: React.MouseEvent<SVGGElement, MouseEvent>;id: string;}) => void

  • labelStyle: changes legend style in general or for specific serie's label
    type: CSSFuncProps
    default: {}

  • lineStyle: changes line style in general or for specific serie's label
    type: CSSFuncProps
    default: {}

    Click on legend series
  • showHide: activates "show/hide" functionality that allows you to hide and show series when clicking on it in the legend
    type: boolean
    default: false

    Click on legend series
  • top changes top legend offset that cannot be defined with bottom
    type: number

  • bottom changes bottom legend offset that be cannot defined with top
    type: number

  • left changes top legend offset that cannot be defined with right
    type: number

  • right changes top legend offset that cannot be defined with left
    type: number