Atlassian charts have been designed with our design principles in mind – charts should be clear and easy to read, feel harmonious with our products, be fast to load, and gracefully reveal depth.

Chart colors

These colors are a subset of our color palette. Use Lime green #8eb021 as the primary color for your charts – this is to separate the standard ADG user interface (mainly blue) from the chart content.

Try to use the colors from left to right except when colors have inherent meaning in your product (for example, in JIRA Agile, blue is ‘work remaining’, and green is ‘work completed’).

Line charts display colors at 100% opacity, bar charts at 75%, and area charts display colors at 50% opacity. This is so users can see the grid lines behind the content.

Lime green

#8eb021

Blue

#3572b0

Red

#d04437

Yellow

#f6c342

Violet

#654982

Pink

#f691b2

Data points and lines

A data point has three states – neutral, hover, and click.

  • Data points are activated on click and show an inline dialog which remains persistent until the user clicks outside the dialog. Users can interact with the information in an inline dialog

  • Data points have two sizes. Use a 10px diameter by default, however in high density charts, fall back to a 5px diameter point

  • Data points and their lines have to be the same color

  • On hover, data points show an outer circle at 25% opacity of the clicked state

Lines are 4px thick, however can be 2px thick in high density charts. Don’t use yellow on a line chart – the contrast is too low on a white background.

Chart points and lines

Clustering

Rather than overlapping data points when they’re close together, cluster them. Reveal the details of each data point within the cluster by clicking on the cluster. This keeps the chart clean and uncluttered by revealing depth when users want to drill down into the details. It also prevents users from having to ‘hunt’ for the right point when they’re close together.

Here’s an example of data before clustering and after clustering:

Chart clustering

Legend

There are two types of legend:

Numeric legend

The numeric legend displays aggregate data in the legend at 48px font size. It can be horizontally or vertically aligned.

Chart numeric legend

Standard legend

The standard legend which uses symbols as well as color to help users understand the chart.

Chart legend

Grid and axis labels

The base grid unit is 20px. Lines on the grid are 1px Silver #e9e9e9. By default, try to use only horizontal lines in the grid to keep the chart uncluttered.

Axis labels are set in 12px uppercase bold, Medium gray #707070.

Chart grid

Chart examples

Here are some examples of charts displaying all of the above elements. Note the following:

Bar chart / 100% stack chart

  • Bars can have a number inside (12px, bold) to display the raw data, in cases where the number cannot fit substitute with an ellipsis '…'
  • Bars should be 40px wide by default, or 20px at high density or 80px at low density
  • Bar chart colors are 75% opacity

Area chart

  • Area chart colors are 50% opacity
  • Data points and their lines are the same color

Line chart

  • Data points and their lines are the same color

Pie chart

  • Pie chart colors should be at 50% opacity

Chart types

Chart types

Interactions

Data point click interaction

Data points are activated on click and show an inline dialog which remains persistent until the user clicks outside the dialog. Users can interact with the information in an inline dialog.

Data point click dialogs

Chart hover interaction

Some charts can include a chart hover tooltip which is present when users hover over the chart.

This is most commonly used to replace the x-axis (vertical) grid lines. It should follow users as they ‘scrub’ across the chart and shouldn’t snap to x-axis labels.

Chart hover tooltips

Chart controls

The chart controls are split into three sections:

  • Time scale changes the window of time users see represented on the chart
  • Refine data edits the input data displayed on the chart
  • Viewing options turns information on and off in the chart

Each section has a ‘Reset to default’ link which returns the values in that specific section to the default settings.

Chart options

Chart zoom interaction

Users can adjust the timeframe in two ways:

  • By adjusting the date range in the chart options
  • By clicking and dragging on a section of the chart

Chart help

Use chart help above complex charts to help users read and understand them. It should communicate the value of the chart to users, as well as common patterns and trends to look out for.

The chart help can contain up to three examples – these are mini charts which display various scenarios. The chart help should be displayed by default on new charts, and remain there until dismissed by the user. Once dismissed, the user can show the help module again by clicking “How do I read this chart?” next to the chart title.

Chart help

Chart page layout

Let’s put all the chart elements together into one layout for a Report page.

Chart layout