Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/TargetProcess/tauCharts/llms.txt

Use this file to discover all available pages before exploring further.

The legend plugin renders a legend for color, fill gradient, and size scales used in the chart. When the chart uses a discrete color scale, the legend items are interactive — clicking an item highlights the corresponding category, and clicking a second time isolates it. The legend can be placed on any side of the chart and supports pre-selecting which categories are visible on initial render.

​
Usage

var chart = new Taucharts.Chart({
    type: 'scatterplot',
    x: 'date',
    y: 'sales',
    color: 'region',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('legend')({
            position: 'right',
            onSelect: function (event) {
                console.log('Selected:', event.selectedCategories);
            }
        })
    ]
});

​
Settings

​
position
'left' | 'right' | 'top' | 'bottom'
default:"'right'"
Controls where the legend is rendered relative to the chart plot area. Use 'bottom' or 'top' for horizontal layouts; 'left' or 'right' for vertical sidebars.
​
onSelect
function
A callback invoked whenever the user interacts with a legend item. Receives an object with:
  • type — the interaction mode: 'focus-single', 'leave-others', or 'reset'.
  • selectedCategories — an array of the category values currently visible in the chart.
onSelect: function (event) {
    console.log(event.type);              // 'focus-single'
    console.log(event.selectedCategories); // ['North', 'South']
}
​
selectedCategories
any[]
An array of category values that should be visible on the first render. Categories not listed here are filtered out initially. The user can still toggle them interactively.
selectedCategories: ['North', 'East']

​
CSS customization

The legend container uses the class .tau-chart__legend. You can override styles to match your design system: 
/* Change legend background */
.tau-chart__legend {
    background: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
}

/* Customize legend item text */
.tau-chart__legend__guide__label {
    font-size: 12px;
    color: #333;
}
Other CSS hooks:
  • .tau-chart__legend__item-color — individual color legend items
  • .tau-chart__legend__guide--color — the color swatch inside an item
  • .tau-chart__legend__reset — the reset button shown when a filter is active
  • .tau-chart__legend__gradient — the SVG gradient used for continuous color scales
  • .tau-chart__legend__size — the SVG used for size legends

​
Examples

​
Bottom-positioned legend with pre-selected categories

Taucharts.api.plugins.get('legend')({
    position: 'bottom',
    selectedCategories: ['Electronics', 'Clothing'],
    onSelect: function (event) {
        // Sync the selection state to external UI
        updateFilterUI(event.selectedCategories);
    }
})

​
Left sidebar legend

Taucharts.api.plugins.get('legend')({
    position: 'left'
})

Build docs developers (and LLMs) love

Get started for freeTalk to us