Tag: legend
- Activate/deactivate a pie slice on legend click instead of toggling
Normally, when you click an item in PieChart's legend, relative slice is hidden or revealed. This quick tutorial will show you how to make the slice activate/deactivate (pull out/in) instead.
- Allow just single series to be displayed at a timeDemo
This demo shows how we can use Legend's hit event to toggle other series off when one series is toggled on, making sure that there's only one series displayed at any given time.
- Chart Legend in an External Container
This tutorial will show you how you can easily move your chart legend outside main container into a totally separate one.
- Custom external legendDemo
This demo shows how we can use some custom code executed on chart load to build completely custom but interactive HTML-based legend for our chart.
- Custom order of legend itemsDemo
This demo shows how we can use events to apply custom order to legend items.
- Custom-ordered legend itemsDemo
This demo shows how we can use events to dynamically re-arrange Legend items per our completely custom criteria.
- Disabling toggling of items in Legend
Normally a Legend will allow toggling of its items. This will also toggle related items, like chart's Series. This tutorial will show how to disable this default functionality.
- Display custom description in legend item tooltipDemo
This demo shows how we can add additional data to chart's Series which then would be used to populate roll-over tooltip on its legend item.
- Highlighting column series on legend click
During the course of this tutorial we'll modify the functionality of the legend from toggling series on and off, to rather highlighting it.
- Legend markers as checkboxesDemo
By default legend displays its markers as squares or mini versions of series. This demo shows how we can replace them with checkboxes.
- Map heat legend with real start/end value labels
A Heat legend uses regular axis to display value range/scale. For narrower setups it might mean that there are not real start/end labels. This tutorial will show how to remedy that.
- Multi-color XY heatmap
Normally, heatmaps that use "heat rules" are restricted to two colors as well as gradient in-between. In tutorial we'll see how we can use adapters to apply any number of colors to heat map based on source value.
- Non-standard legend alignment
You can use position to place chart Legend on top, bottom, left, or right. In all those cases, Legend will center across the edge it is placed on. This tutorial will show some other alignment options.
- Re-arranging elements of the chart legendDemo
This demo shows how we can use legend item label's parentset event to move it before the marker.
- Reversing the order of Legend items
This short tutorial will show how you can easily reverse the Legend items.
- Selectively placing legend items in different containersDemo
This demo shows how we can selectively place chart legend's items into separate containers.
- Show series bullets/labels on legend hoverDemo
This demo shows how we can add events to Legend items that would toggle on respective series' bullets and bullet labels on hover.
- Toggle series on multiple charts using same LegendDemo
This demos shows how we can sync up toggling of matching series across multiple charts using single legend.
- Toggling multiple series with a single legend item
This tutorial will show how you can toggle several Series at once, with a single Legend item.
- Truncating legend labels
Sometimes chart legend can get out of control size-wise, especially if you have long labels. This tutorial will show how you can get it back in check by capping the length of its labels.
- Using adapters to modify legend item appearance
Normally the Legend will either display identical markers for all items, or make them look like their related series. This tutorial shows how you can use adapters to further customize each individual item in Legend.
- Using percent values in series
In our everyday charting we mainly use absolute values. However, sometimes we might need to show how specific value relates to other elements. In this case relative percent value is much more representative than absolute one. This tutorial will explain ways we can use such relative values.