Show legend as a table
This article explains how to transform your standard chart legend into a clean, table-like layout with aligned values and custom borders. This is particularly useful for donut or pie charts where you want to show a name and a specific value side-by-side.
The following steps will guide you through the process of achieving this professional, tabular legend layout
Step 1: Enable the Legend
First, ensure the legend is visible. Under your Basic Configuration, toggle the legend to On. For the best "table" look, it is often helpful to set the alignment to the bottom of the chart.
Step 2: Enable HTML for the Legend
By default, Highcharts renders legends using SVG, which limits layout options. To use a tabular structure, you must enable HTML rendering.
- Navigate to Advanced > Legend.
- Scroll down to the UseHTML property and set it to True.
Step 3: Insert the Tabular Formatting
Still in the Advanced > Legend section, look for the Label Format field. This field controls the content of each legend item. Copy and paste the following code to create a two-column layout with a bottom border:
<div style="display: flex; justify-content: space-between; width: 200px; border-bottom: 1px solid #ccc; padding: 0 0 5px 0; margin: 0;"><span style="max-width: 150px; white-space: normal;">{name}</span><span style="font-weight: bold; white-space: nowrap; align-self: flex-end;">{y}%</span></div>
What this code does:
- Flexbox Layout: The
display: flexandjustify-content: space-betweensettings force the name to the far left and the value to the far right. - Text Wrapping: The
max-width: 150pxensures that long names wrap onto a second line rather than breaking the table width. - Row Separators: The
border-bottomcreates a clean horizontal line between each legend item.
Step 4: Clean Up the Chart
To prevent your chart from appearing cluttered, you should disable the default data labels that appear directly on the chart slices.
- Navigate to Basic > Data Labels.
- Set Visibility to Off.
