Background

Result of spike T369863. We would like to modify the appearance of charts and labels

User story

As a reader I want visual separation from charts and other content

Design

Title/description Tracked in T375575: Charts legend display incorrectly in RTL and T375235: Apply default styling for charts

• Title should be aligned left for LTR languages and right for RTL languages
• Title text should be font size 16
• Title text color should be #101418 in light mode, #F8F9FA in dark mode
• Title subtext should be font size 14
• Title subtext color should be #54595D in light mode, #A2A9B1 in dark mode
• Font weights can remain the defaults

Legend Tracked in T379183: Adjust styling of legend

• Legend should be oriented vertical
• The item gap should be 8
• Legend should begin 16px beneath the Title
• Legend text should be aligned left
• Legend text color should be #202122 in light mode, #EAECF0 in dark mode
• Font weights and sizes can remain the defaults

Axis/labels => T379184: Adjust styling of axis labels

• Axis label text color should be #54595D in light mode, #A2A9B1 in dark mode
• Axis baseline and ticks color can inherit text color of #54595D in light mode, #A2A9B1 in dark mode (which should happen by default)
• Axis lines (except the baseline with the ticks) color should be #DADDE3 in light mode, #404244 in dark mode

Framing => T379185: Adjust styling of Chart frame

• Charts should contain a frame by default
• Frame should mimic that of images, using a border defined as 1px solid #C8CCD1 in light mode, 1px solid #54595D in dark mode
• The frame should have an internal padding of 16px
• For now we will not offer a frameless option

Tooltips

• Post MVP

Emphasis

• Post MVP

Acceptance criteria

• Charts should have default design specifics according to the details listed above in the Design sections
• These styles should not be made customizable by the editor