Dashboard gadget: Values on bars may overlap when grouped
Description
Problem
In the Bar Chart gadget, values on bars overlap when the items are grouped, which makes them illegible. Example settings: Show values on bars enabled, Chart by Approval name or Definition, Measure Approval rate or Time to resolution, Group by Resolved.
Cause
A grouped bar chart splits every category into one bar per series. With many categories and series the bars become a few pixels wide, while each value was still drawn above its bar. Nothing checked whether a value had room, so neighbouring values were drawn over each other. The same happened in single-series charts with many categories, in stacked segments too thin for their value, in line charts where several lines meet, at the first point of a line chart (the value ran into the value axis labels), and in pie charts with many small slices or in a narrow gadget (labels cut off at the edge).
Change
The values of a chart are laid out together, measured with the real text width: a value is drawn where it has room and left out only where it would touch another value or another bar, or leave the chart. The tooltip still shows every value.
-
Bar chart, bars side by side (grouped) or one bar per category: values are placed biggest first, above their bar (vertical) or beside it (horizontal). A value is left out only where it would overlap a value already placed, another bar or the chart edge, so a bar with free space around it shows its value however thin it is. Values stay on one line.
-
Bar chart, stacked and stacked 100%: a segment shows its value when the value fits inside the segment.
-
Vertical bar charts and line charts keep the same space above the chart whether values are shown or not, so switching Show values on or off no longer resizes the chart.
-
Line chart: values are shown when the points are far enough apart for the widest value (and at least 28 px), as before, so with many points in a narrow gadget they are hidden. Where values of several lines would overlap, the line listed first in the legend keeps its value. A value at the first or last point is moved inside the chart instead of running into the axis.
-
Pie chart: slice labels are placed as before. A label is shortened to the room at its position, shows only the percentage when not even a short name fits, and is left out when it would overlap the label of a bigger slice.
Acceptance criteria
-
With the settings from the problem and the QA settings (Chart by Approval name; Group by Created (month), Approver, Current step, Status or Priority; Max bars 10 and 30), no values overlap, at any gadget width.
-
A bar with free space above it shows its value, also in grouped charts with thin bars.
-
Switching Show values on bars on or off does not change the size of a vertical bar chart.
-
Stacked charts show values on segments big enough for them.
-
Line charts show no overlapping values and no value over the axis labels; dense line charts show none, as before.
-
Pie charts show no overlapping or cut-off slice labels.
Manual tester notes
-
Hover a bar, point or slice without a value: the tooltip shows it.
-
Bar chart, Chart by Approval name, Show values on, Group by Created (month), Approver, Current step, Status and Priority, Max bars 10 and 30: vertical, horizontal, stacked, stacked 100%. Full-width and half-width gadget, and the editor preview. Where bars are crowded some values are left out so the others stay readable; a standalone bar keeps its value.
-
In the editor, switch Show values on bars off and on: the chart keeps its size.
-
Bar chart without Group by, Chart by Status or Definition: values show as before; with many categories in a narrow gadget, a value that would touch its neighbour is left out.
-
Line chart, Chart by Created, Group by Status, Show values on: values show when the points have room for them. With months on a full-width gadget they usually do; on a half-width gadget they are hidden. The value at the first point does not touch the axis labels.
-
Pie chart, Chart by Approval name with many approval names, Show slice labels and percentages on the chart: no overlapping or cut-off labels at full width, half width and in a narrow column; the biggest slices keep theirs.
-
Measures with long values (Time to resolution, Approval rate) and a Polish locale (decimal comma).
Verified on a dev site
Checked on 2026-10-16 on a developer's Jira site (local build through a tunnel), dark theme, at full width, half width, in a narrow column (Add gadget panel open) and in the gadget editor:
-
QA settings: grouped bars by Approval name with Group by Created (month), Approver, Current step, Status (Max bars
-
and Priority: no overlapping values; standalone bars show their values.
-
-
The ticket's settings (Approval rate and Time to resolution, Group by Resolved): values shown where they fit, none overlap.
-
Show values on bars switched off and on in the editor: the axes stay in place.
-
Horizontal and stacked bars; monthly line by Status (values at full width, hidden at half width, first value clear of the axis); pie with 50 slices.
-
The bar, line and pie charts were also rendered with generated data at widths from 280 to 1290 px (180 combinations: grouped, single, horizontal, stacked, 100%, areas, a second Y axis, an axis maximum below the data, durations, Polish percentages); an automated check found no value touching another value, a bar or the axis labels, and no label outside the chart.