Element Colors

Element-Level Colors

Override colors on individual elements using fill (bars, slices, stages) or stroke (lines):

<dc-chart width="500" height="350">
  <dc-title>Quarterly Sales</dc-title>
  <dc-bar value="10" fill="red" label="Q1"></dc-bar>
  <dc-bar value="25" fill="blue" label="Q2"></dc-bar>
  <dc-bar value="15" fill="green" label="Q3"></dc-bar>
  <dc-bar value="40" fill="orange" label="Q4"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350" palette="pastel">
  <dc-title>Pastel with Red Override</dc-title>
  <dc-bar value="10" label="Q1"></dc-bar>
  <dc-bar value="25" label="Q2"></dc-bar>
  <dc-bar value="15" fill="#F44336" label="Q3 (Alert)"></dc-bar>
  <dc-bar value="40" label="Q4"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350">
  <dc-title>Temperature Trends</dc-title>
  <dc-line stroke="#9C27B0" label="City A">
    <dc-point value="15" label="Mon"></dc-point>
    <dc-point value="18" label="Tue"></dc-point>
    <dc-point value="22" label="Wed"></dc-point>
  </dc-line>
  <dc-line stroke="#FF5722" label="City B">
    <dc-point value="12" label="Mon"></dc-point>
    <dc-point value="20" label="Tue"></dc-point>
    <dc-point value="18" label="Wed"></dc-point>
  </dc-line>
  <dc-legend position="top"></dc-legend>
</dc-chart>

<dc-chart width="500" height="350">
  <dc-title>Highlighted Data Points</dc-title>
  <dc-line stroke="#2196F3" label="Sales">
    <dc-point value="15" label="Jan"></dc-point>
    <dc-point value="22" label="Feb"></dc-point>
    <dc-point value="18" fill="#F44336" label="Mar (Low)"></dc-point>
    <dc-point value="35" fill="#4CAF50" label="Apr (High)"></dc-point>
    <dc-point value="28" label="May"></dc-point>
  </dc-line>
</dc-chart>

Sequential Palettes (Funnel Charts)

Funnel charts can use built-in sequential palettes for gradient-like color progressions:

<dc-funnel-chart width="500" height="350"
                 palette="blues">
  <dc-title>Blue Sequence</dc-title>
  <dc-funnel-stage value="1000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Opportunities"></dc-funnel-stage>
  <dc-funnel-stage value="80" label="Customers"></dc-funnel-stage>
</dc-funnel-chart>

<dc-funnel-chart width="500" height="350"
                 palette="purples">
  <dc-title>Purple Sequence</dc-title>
  <dc-funnel-stage value="1000" label="Stage 1"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Stage 2"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Stage 3"></dc-funnel-stage>
  <dc-funnel-stage value="80" label="Stage 4"></dc-funnel-stage>
</dc-funnel-chart>

Color Priority

Colors are resolved in this priority order (highest to lowest):

1. Element-level — fill or stroke on individual elements
2. Custom palette match — min-value/max-value or label from a custom palette
3. Palette colors — Built-in or user-defined palette, assigned by index
4. Auto-generated — Golden ratio algorithm

Stroke Width

Control stroke (border) width using the stroke-width attribute:

<dc-pie-chart width="500" height="350"
              palette="pastel"
              stroke-width="3">
  <dc-title>Thick Borders</dc-title>
  <dc-pie-slice value="35" label="A"></dc-pie-slice>
  <dc-pie-slice value="28" label="B"></dc-pie-slice>
  <dc-pie-slice value="22" label="C"></dc-pie-slice>
  <dc-pie-slice value="15" label="D"></dc-pie-slice>
</dc-pie-chart>

<dc-funnel-chart width="500" height="350"
                 palette="blues"
                 stroke-width="2">
  <dc-title>Blue Theme</dc-title>
  <dc-funnel-stage value="1000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Opportunities"></dc-funnel-stage>
  <dc-funnel-stage value="80" label="Customers"></dc-funnel-stage>
</dc-funnel-chart>

Theming with CSS

Per-element attributes handle one-offs. For anything applied consistently — a brand font, a dark theme, a hover effect — use the --dc-* custom properties and ::part(). Custom properties inherit through the shadow boundary, so one rule themes every chart beneath it.

.dark-theme {
  --dc-surface: #1f2937;
  --dc-border: 1px solid #374151;
  --dc-shadow: none;
  --dc-font-family: Georgia, serif;
}

#parts-demo::part(bar) {
  transition: opacity .15s;
}
#parts-demo::part(bar):hover {
  opacity: .6;
}
#parts-demo::part(grid-line) {
  stroke: #fde68a;
}
#parts-demo::part(axis-label) {
  font-weight: bold;
}

Chart-Level Default Colours

When an element sets no fill of its own and matches no palette entry, the chart-level default is used. bar-color, line-color and slice-color set that default for bars, lines and pie slices respectively — useful when one colour for the whole series says more than a palette would.

Note the difference when they are omitted: bars are given distinct auto-generated colours, while lines all share one default stroke. Give each line its own stroke, or a palette, when they need telling apart.

<dc-chart width="500" height="350" bar-color="#7c3aed">
  <dc-bar value="30" label="Q1"></dc-bar>
  <dc-bar value="45" label="Q2"></dc-bar>
  <dc-bar value="38" label="Q3"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350" line-color="#ea580c">
  <dc-line label="Temperature">
    <dc-point value="15" label="Mon"></dc-point>
    <dc-point value="22" label="Tue"></dc-point>
    <dc-point value="18" label="Wed"></dc-point>
  </dc-line>
</dc-chart>

<dc-pie-chart width="500" height="350" slice-color="#0d9488">
  <dc-pie-slice value="45" label="A"></dc-pie-slice>
  <dc-pie-slice value="30" label="B" fill="#f59e0b"></dc-pie-slice>
  <dc-pie-slice value="25" label="C"></dc-pie-slice>
</dc-pie-chart>

Label Colour

label-fill sets the colour of an element's own label. By default labels drawn inside a shape pick a colour that contrasts with the fill; set label-fill to override that decision.

<dc-chart width="500" height="350" show-value>
  <dc-bar value="30" label="Dark" fill="#1e293b"></dc-bar>
  <dc-bar value="45" label="Light" fill="#fde68a"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350" show-value>
  <dc-bar value="30" label="Dark" fill="#1e293b"
          label-fill="#f87171"></dc-bar>
  <dc-bar value="45" label="Light" fill="#fde68a"
          label-fill="#7c3aed"></dc-bar>
</dc-chart>