Chart

Chart

.pi-style__chart__x-axis-title

The X axis title on a chart.

 

.pi-style__chart__x-axis-value

The X axis value in a chart

 

.pi-style__chart__null-x-axis-value

Dealing with null values when they appear on the X axis.

 

.pi-style__chart__y-axis-title

The Y axis title in a chart.

 

.pi-style__chart__y-axis-value

The  Y axis value in a chart

 

.pi-style__chart__legend-title

The legend title in a chart

 

.pi-style__chart__legend-value

The legend value in a chart

 

.pi-style__chart__null-legend-value

Dealing with null values when they appear

 

.pi-style__chart__null-text-value

Dealing with null values when they appear

 

.pi-style__chart__tooltip-text

The tool tip text shown when hovering over a data point in a chart. Note it isn’t possible to edit the whole background of the tool tip.

 

.pi-style__chart__data-value

The data values (if enabled) in a chart

.pi-style__chart__data-value.pi-style__chart__stacked-segment__data-value

Overrides the data value style set by .pi-style__chart__data-value for segments within stacked charts. Relevant charts include: stacked bar, stacked column, 100% stacked bar, 100% stacked column, stacked area & 100% stacked area. The following example shows this on a stacked bar chart, with the stacked segments having a different style to the totals.

Screenshot from 2025-10-09 13-14-00.png

.pi-style__chart__pie-and-donut__data-value

The data values (if enabled) shown in a pie or donut chart.

 

.pi-style__chart__traffic-light__data-value

The background and font color of the data values (if enabled)

 

.pi-style__chart__light-bulb__data-value

The background and font colour of the data values (if enabled)

 

.pi-style__chart__speedometer__data-title

The background and font colour of the title of the measure in the speedometer

 

.pi-style__chart__speedometer__data-value

The background and font color of the value of the measure in the speedometer

 

.pi-style__chart__speedometer__tick

The background and font color of the target labels on a speedometer.

 

.pi-style__chart__editor .pi-style__chart__editor__add_btn

Applies to an ‘add’ button used across the chart editor.

add.png

 

.pi-style__chart__editor .pi-style__chart__editor__add_btn[disabled]

Applies to an 'add' button when it is disabled across the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__add_btn:hover, .pi-style__chart__editor .pi-style__chart__editor__add_btn:focus

Applies when the user hovers over an ‘add’ button in the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__add_btn:active

Applies when an ‘add’ button is active/selected.

 

.pi-style__chart__editor .pi-style__chart__editor__remove_btn

Applies to a ‘remove’ button used across the chart editor.

remove.png

 

.pi-style__chart__editor .pi-style__chart__editor__remove_btn[disabled]

Applies to a 'remove' button when it is disabled across the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__remove_btn:hover, .pi-style__chart__editor .pi-style__chart__editor__remove_btn:focus

Applies when the user hovers over a ‘remove’ button in the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__remove_btn:active
Applies when a ‘remove’ button is active/selected.

 

.pi-style__chart__editor .pi-style__chart__editor__sort_btn

Applies to a ‘sort’ button used across the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__sort_btn[disabled]

Applies to a 'sort' button when it is disabled across the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__sort_btn:hover, .pi-style__chart__editor .pi-style__chart__editor__sort_btn:focus

Applies when the user hovers over a ‘sort’ button in the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__sort_btn:active

Applies when a ‘sort’ button is active/selected.

 

.pi-style__chart__editor .pi-style__chart__editor__close_btn

Applies to a ‘close’ button used across the chart editor.

close.png

 

.pi-style__chart__editor .pi-style__chart__editor__close_btn[disabled]

Applies to a 'close' button when it is disabled across the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__close_btn:hover, .pi-style__chart__editor .pi-style__chart__editor__close_btn:focus

Applies when the user hovers over a ‘close’ button in the chart editor.

 

.pi-style__chart__editor .pi-style__chart__editor__close_btn:active

Applies when a ‘close’ button is active/selected.