Build and HTML Legend

The Charts Control doesn't have a legend by default. However, one can build a simple legend using a standard HTML unordered list.

Each list item has its own class to allow CSS to give it the correct background color. A span element surrounds the text in the list item to allow styling, and a descriptive CSS class may be provided for extra semantic meaning.

Adding Styles

The legend itself is given a list-style value of none to hide the bullets. Each list item is given left padding to allow a background-color to be displayed.

Each of the PieChart's categories has its own class that is used to set the background-color of the list item.

The span element inside the list items is given a background-color to match the legend's main background and to hide the category color under the text. Setting display:block conceals the colored background on the right side.