Customization

Control every visual aspect of your charts. Set colors, scales, margins, and typography to match your style.

Color Schemes

Apply predefined palettes or define custom colors.

Built-in Schemes

colorScheme: schemeCategory10   # 10 distinct colors
colorScheme: schemeTableau10    # Tableau palette
colorScheme: schemePaired       # 12 paired colors
colorScheme: schemeSet3         # 12 pastel colors
colorScheme: schemeAccent       # 8 accent colors

Sequential Schemes

For continuous data from low to high:

colorScheme: schemeBlues        # Light to dark blue
colorScheme: schemeGreens       # Light to dark green
colorScheme: schemeOranges      # Light to dark orange
colorScheme: schemeReds         # Light to dark red

Diverging Schemes

For data with a meaningful midpoint:

colorScheme: schemeRdBu         # Red to blue
colorScheme: schemePiYG         # Pink to green
colorScheme: schemeBrBG         # Brown to teal

Custom Colors

Specify exact colors for categories:

color: category
colors:
  Sales: "#4f46e5"
  Marketing: "#10b981"
  Engineering: "#f59e0b"

Scales

Map data values to visual properties.

Axis Scales

scales:
  x:
    type: linear          # linear, log, sqrt, time, band
    domain: [0, 100]      # min/max values
    nice: true            # round to nice numbers
  y:
    type: log
    domain: [1, 1000000]

Color Scale

scales:
  color:
    type: categorical     # categorical, sequential, diverging
    scheme: schemeTableau10
    domain: [A, B, C]     # category order

Size Scale

For bubble charts:

scales:
  size:
    range: [4, 40]        # min/max radius in pixels
    domain: [0, 1000000]  # data range

Layout

Control spacing and dimensions.

Presets

layout: compact        # Minimal margins, small text
layout: default        # Standard spacing
layout: spacious       # Extra padding
layout: presentation   # Large text, wide margins

Custom Margins

margin:
  top: 40
  right: 20
  bottom: 50
  left: 60

Dimensions

width: 800
height: 400

Typography

Titles and Labels

title: Sales by Region
subtitle: Q4 2024
xLabel: Product Category
yLabel: Revenue ($)

Font Styling

style:
  title:
    fontSize: 18
    fontWeight: bold
  axis:
    fontSize: 12
  label:
    fontSize: 10

Marks

Customize how data appears.

Stroke and Fill

marks:
  - type: line
    stroke: "#4f46e5"
    strokeWidth: 2
    strokeDasharray: "5,5"    # dashed line

marks:
  - type: bar
    fill: "#4f46e5"
    fillOpacity: 0.8
    stroke: "#312e81"
    strokeWidth: 1

Point Styles

marks:
  - type: dot
    r: 5                      # radius
    fill: "#4f46e5"
    symbol: circle            # circle, cross, diamond, square, star, triangle

Axes

Grid Lines

grid: true                    # both axes
xGrid: true                   # x-axis only
yGrid: true                   # y-axis only

Tick Formatting

xTickFormat: "%b %Y"          # date format
yTickFormat: "$,.0f"          # currency

Tick Count

xTicks: 5
yTicks: 10

Legends

legend: true
legendPosition: top-right     # top-left, top-right, bottom-left, bottom-right

Theme Integration

Charts inherit Obsidian's light/dark theme automatically. Override with explicit colors when needed.

Examples

Minimal Dark Theme

type: line
x: date
y: value
style:
  background: "#1a1a2e"
  color: "#eaeaea"
colorScheme: schemeSet2

Corporate Palette

type: bar
x: quarter
y: revenue
color: division
colors:
  North: "#003f5c"
  South: "#58508d"
  East: "#bc5090"
  West: "#ff6361"

Next Steps

• Scales Reference - Scale types and options
• Marks Reference - Mark customization
• YAML Schema - All configuration options