Patterns & High Contrast

Add SVG pattern fills to chart elements for visual distinction and accessibility. Enable high-contrast mode for WCAG-compliant color schemes with automatic patterns.

Direct Pattern on Elements

Apply patterns directly on chart elements using the pattern attribute. Choose from 8 built-in pattern types:

Bar Chart with Patterns

<dc-chart width="500" height="350">
  <dc-bar value="75" label="Diagonal"
    fill="#3b82f6" pattern="diagonal-lines"></dc-bar>
  <dc-bar value="60" label="Dots"
    fill="#10b981" pattern="dots"></dc-bar>
  <dc-bar value="85" label="Crosshatch"
    fill="#f59e0b" pattern="crosshatch"></dc-bar>
  <dc-bar value="45" label="Grid"
    fill="#8b5cf6" pattern="grid"></dc-bar>
</dc-chart>

Pie Chart with Patterns

<dc-pie-chart width="500" height="350">
  <dc-pie-slice value="40" label="Sales"
    fill="#3b82f6" pattern="diagonal-lines"></dc-pie-slice>
  <dc-pie-slice value="30" label="Marketing"
    fill="#10b981" pattern="dots"></dc-pie-slice>
  <dc-pie-slice value="20" label="R&D"
    fill="#f59e0b" pattern="crosshatch"></dc-pie-slice>
  <dc-pie-slice value="10" label="Admin"
    fill="#8b5cf6" pattern="checkerboard"></dc-pie-slice>
</dc-pie-chart>

All Pattern Types

The library includes 8 built-in pattern types:

Pattern Gallery

Available patterns:
- diagonal-lines
- diagonal-lines-reverse
- horizontal-lines
- vertical-lines
- dots
- crosshatch
- grid
- checkerboard

Pattern Customization

<dc-chart width="500" height="350">
  <dc-bar value="80" label="Custom Stroke"
    fill="#e2e8f0" pattern="diagonal-lines"
    pattern-stroke="#0f172a"></dc-bar>
  <dc-bar value="60" label="Custom Background"
    fill="#fef3c7" pattern="dots"
    pattern-stroke="#78350f"
    pattern-fill="#fffbeb"></dc-bar>
  <dc-bar value="70" label="Large Pattern"
    fill="#dbeafe" pattern="crosshatch"
    pattern-scale="2"></dc-bar>
</dc-chart>

Pattern by ID Reference

Give <dc-fill> elements an id attribute inside a palette, then reference them by ID in any chart:

Shared Pattern Definitions

<!-- Define patterns in a palette -->
<dc-palette id="shared-patterns">
  <dc-fill id="danger-pattern" pattern="crosshatch"
    stroke="#dc2626" fill="#fee2e2"></dc-fill>
  <dc-fill id="warning-pattern" pattern="diagonal-lines"
    stroke="#f59e0b" fill="#fef3c7"></dc-fill>
</dc-palette>

<!-- Reference by ID in any chart -->
<dc-chart width="500" height="350">
  <dc-bar value="25" label="Critical" pattern="danger-pattern"></dc-bar>
  <dc-bar value="45" label="Warning" pattern="warning-pattern"></dc-bar>
  <dc-bar value="80" label="Good" fill="#16a34a"></dc-bar>
</dc-chart>

Funnel with Pattern References

<dc-funnel-chart width="500" height="350">
  <dc-funnel-stage value="1000" label="Visitors"
    pattern="danger-pattern"></dc-funnel-stage>
  <dc-funnel-stage value="500" label="Leads"
    pattern="warning-pattern"></dc-funnel-stage>
  <dc-funnel-stage value="100" label="Customers"
    fill="#16a34a"></dc-funnel-stage>
</dc-funnel-chart>

Patterns in Palettes

Include <dc-fill> elements inside <dc-palette> for label and value-based pattern matching:

Label-Based Pattern Matching

<dc-palette id="pattern-palette">
  <dc-fill label="Critical" pattern="crosshatch"
    stroke="#dc2626" fill="#fee2e2"></dc-fill>
  <dc-fill label="Warning" pattern="diagonal-lines"
    stroke="#f59e0b" fill="#fef3c7"></dc-fill>
  <dc-fill label="OK" fill="#10b981"></dc-fill>
</dc-palette>

<dc-chart palette="pattern-palette" width="500" height="350">
  <dc-bar value="25" label="Critical"></dc-bar>
  <dc-bar value="55" label="Warning"></dc-bar>
  <dc-bar value="85" label="OK"></dc-bar>
</dc-chart>

Value-Based Pattern Matching

<dc-palette id="threshold-patterns">
  <dc-fill max-value="30" pattern="crosshatch"
    stroke="#dc2626"></dc-fill>
  <dc-fill min-value="30" max-value="70"
    pattern="diagonal-lines" stroke="#f59e0b"></dc-fill>
  <dc-fill min-value="70" fill="#16a34a"></dc-fill>
</dc-palette>

<dc-chart palette="threshold-patterns" width="500" height="350">
  <dc-bar value="20" label="Low"></dc-bar>
  <dc-bar value="50" label="Medium"></dc-bar>
  <dc-bar value="80" label="High"></dc-bar>
</dc-chart>

High Contrast Mode

Enable high-contrast mode with the high-contrast attribute. Charts automatically use WCAG AA compliant colors and distinct patterns:

High Contrast Bar Chart

<dc-chart high-contrast width="500" height="350">
  <dc-bar value="75" label="Q1"></dc-bar>
  <dc-bar value="60" label="Q2"></dc-bar>
  <dc-bar value="85" label="Q3"></dc-bar>
  <dc-bar value="45" label="Q4"></dc-bar>
</dc-chart>

High Contrast Pie Chart

<dc-pie-chart high-contrast width="500" height="350">
  <dc-pie-slice value="40" label="Sales"></dc-pie-slice>
  <dc-pie-slice value="30" label="Marketing"></dc-pie-slice>
  <dc-pie-slice value="20" label="R&D"></dc-pie-slice>
  <dc-pie-slice value="10" label="Admin"></dc-pie-slice>
</dc-pie-chart>

Custom High Contrast Palettes

Override the built-in high-contrast colors by providing a <dc-palette high-contrast> inside the chart:

Brand-Aligned High Contrast

<dc-chart high-contrast width="500" height="350">
  <dc-palette high-contrast>
    <dc-fill fill="#0047AB"></dc-fill>
    <dc-fill fill="#CC5500"></dc-fill>
    <dc-fill fill="#228B22"></dc-fill>
    <dc-fill fill="#8B008B"></dc-fill>
  </dc-palette>
  <dc-bar value="75" label="Q1"></dc-bar>
  <dc-bar value="60" label="Q2"></dc-bar>
  <dc-bar value="85" label="Q3"></dc-bar>
  <dc-bar value="45" label="Q4"></dc-bar>
</dc-chart>

Auto-Detect High Contrast

<!-- Charts auto-detect OS high-contrast setting -->
<!-- via prefers-contrast: high media query -->
<dc-chart width="500" height="350">
  <!-- High contrast palette used only when needed -->
  <dc-palette high-contrast>
    <dc-fill fill="#000080"></dc-fill>
    <dc-fill fill="#800000"></dc-fill>
    <dc-fill fill="#006400"></dc-fill>
  </dc-palette>
  <dc-bar value="75" label="Q1"></dc-bar>
  <dc-bar value="60" label="Q2"></dc-bar>
  <dc-bar value="85" label="Q3"></dc-bar>
</dc-chart>

This chart uses normal colors now, but will switch to the high-contrast palette when your OS enables high contrast mode.

Bubble Charts with Patterns

Patterns work on bubble charts too:

Patterned Bubbles

<dc-chart width="500" height="350">
  <dc-bubble value="20" size-value="50" label="A"
    fill="#3b82f6" pattern="diagonal-lines"></dc-bubble>
  <dc-bubble value="40" size-value="30" label="B"
    fill="#10b981" pattern="dots"></dc-bubble>
  <dc-bubble value="60" size-value="70" label="C"
    fill="#f59e0b" pattern="crosshatch"></dc-bubble>
  <dc-bubble value="80" size-value="40" label="D"
    fill="#8b5cf6" pattern="grid"></dc-bubble>
</dc-chart>

High Contrast Bubbles

<dc-chart high-contrast width="500" height="350">
  <dc-bubble value="20" size-value="50" label="A"></dc-bubble>
  <dc-bubble value="40" size-value="30" label="B"></dc-bubble>
  <dc-bubble value="60" size-value="70" label="C"></dc-bubble>
  <dc-bubble value="80" size-value="40" label="D"></dc-bubble>
</dc-chart>