Ordering the values in a chart
A chart built from a field draws its values in the order the field defines them. The Order Values setting changes that, so you can put the largest slice or bar first instead. It lives in the Design menu of the Chart Configuration panel, above the chart preview.
The three ordering options #
- Values order (default). The chart follows the field’s own choices, in the order they are listed on the field. A choice with no entries keeps its place, so the sequence never moves.
- Highest to lowest. The largest value is drawn first.
- Lowest to highest. The smallest value is drawn first.
With either of the last two, the sequence is recalculated every time the chart is drawn, so values change places as entries come in.
Note: the setting appears for charts built from a field. A chart plotted against time is always drawn in date order. If the field has no predefined choices, the values are read from the entries and listed in ascending order. On a bar chart, turning on Exclude Empty Labels removes any choice with no entries, and everything after it moves up a place.
Ordering decides which colour each value gets #
A colour palette is a list, and each slice or bar takes the colour sitting at its own position in that list. A colour therefore belongs to a position rather than to a particular value, and any change to the order moves the colours with it.
The chart below runs on a custom palette, the kind you add with the gk/gravitycharts/color-palettes filter described in Adding a Custom Chart Color Palette. Its five colours were each picked for one application status, green for Approved and red for Declined. Ordered from lowest to highest, Approved lands in fifth place and takes the fifth colour, which is red:
The same chart, same palette, on Values order (default): the statuses follow the field’s choices, so each one keeps the colour it was given.
Both charts above run on the same palette, and it is written in the field’s choice order, which is why only the second one reads correctly. So when the colours carry meaning, keep Order Values on the default and list the colours the same way:
add_filter( 'gk/gravitycharts/color-palettes', function ( $palettes ) {
$colors = [
'#079AFF', // New
'#EDB63E', // Under review
'#9B8CD8', // On hold
'#47CB14', // Approved
'#DE220E', // Declined
];
$palettes['status_colors'] = [
'label' => 'Application statuses',
'borderColor' => $colors,
'backgroundColor' => $colors,
];
return $palettes;
} );Read here how to add this code sample to your website: Where to put code samples.
If you reorder the choices on the field itself later, the chart follows the new order, so the palette needs the same treatment.
