Skip to content

Cigarette chart


Basic data visualization rules are described in the D3 chart.


Cigarette chart shows parts of a whole by dividing a bar into proportional segments. Each segment represents a fraction, and the entire bar represents the total sum, always equaling 100%. Basically it serves the same function as Donut chart does.

Key points for using cigarette chart:

  • Cigarette charts are best for highlighting category proportions, not exact values.
  • It can only show a few values clearly. With more values, segments become too small to be effective. For more than 5 categories, consider another chart type, like a Bar chart.


The gap between values is 1px. Border-radius for the whole bar is 2px (--intergalactic-chart-rounded).


Chart can be displayed using horizontal or vertical layout.

  • For the horizontal layout values are displayed from left to right.

  • For the vertical layout values are displayed from bottom to top.


  • Keep the legend close to the chart, ideally within a 24px margin.
  • Legends have a 16px margin-right and a 12px margin between values.
  • Align the legend with the chart's top.

Total value

  • You can place the largest or total value next to the chart.
  • Always name the value.


  • Use 24px (--fs-500) size, --bold font-weight and --text-primary color for the value text.
  • For the description text use 12px (--fs-100) size and --text-secondary color.
  • Center them inside the chart vertically and horizontally.


When hovering over a sector, it increases by 2px.

For a clickable sector the cursor changes to pointer.

Edge cases

Null values

Show zeros in the legend but not on the chart. Show 0 as the values in the legend, use --text-secondary color.

Value less than or equal 1%

Show as 1% on the chart.

No data

Mark data as n/a in legend and tooltip, use --text-secondary color.

Initial data loading

Show Skeleton during initial loading. If the chart has a title, display it to inform users about what's loading. Refer to Skeleton for more details.

Use the --skeleton-bg color token for the skeleton's background.

Refer to Error & n/a widget states for all other "empty states".

Released under the MIT License.

Released under the MIT License.