Colors for stacked bar chart

Hello!

I am trying to render a stacked bar chart, and I'd like each of the segments in a bar to be a different color.

My simple mind says that'd need an array eg:

fill: (red, blue,green,yellow)

That does not work for me.

#let data = (
  ([1], 1,3,5,7,9),
  ([2], 2,3,4,5,6),
  ([3], 5,6,7,8,9)
)
#canvas({
chart.barchart(mode: "stacked",
                 size: (3, auto),
				 bar-style: (fill: (red, blue, green, yellow)),
                 value-key: (..range(1, 6)),
                 x-tick-step: 6,
                 data
				 )
                
}
)

error: expected color, gradient, tiling, or none, found array

I've tried a few other things, but I am clearly clueless. Please advise!

Hello :). The argument bar-style takes a function <int> => <dictionary> which must return a style dictionary:

#import "@preview/cetz:0.4.2"
#import "@preview/cetz-plot:0.1.3": *

#let data = (
  ([1], 1,3,5,7,9),
  ([2], 2,3,4,5,6),
  ([3], 5,6,7,8,9)
)

#cetz.canvas({
  chart.barchart(mode: "stacked",
                 size: (3, auto),
                 bar-style: n => (fill: (red, blue, green, yellow).at(calc.rem(n, 4))),
                 value-key: (..range(1, 6)),
                 x-tick-step: 6,
                 data)                
})

Navigation Menu

Repository navigation

Colors for stacked bar chart #165

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Colors for stacked bar chart #165

Description

Activity

johannes-wolf commented on Jan 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions