MeldUI

Chart Theme Customization

Customize chart appearance with CSS variables, color palettes, and dark mode.

Tailwind CSS Integration

All chart components read your project’s Tailwind CSS theme variables for foreground colors, background colors, borders, and font styles. This means charts automatically match the rest of your MeldUI components without any extra configuration.

Key CSS variables used by charts:

VariableUsed For
--color-foregroundAxis labels, tick text
--color-muted-foregroundGrid lines, secondary text
--color-backgroundChart background
--color-borderAxis lines, chart borders
--color-cardTooltip background
--color-card-foregroundTooltip text

Dark Mode

Charts detect dark mode automatically by reading the dark class on the <html> element. When dark mode is active, axis labels, grid lines, tooltips, and backgrounds all adapt to use the dark theme variables. No additional props are required.

Color Palettes

Pass a palette name as a string to the colors config property:

<MeldLineChart :config="{ ...config, colors: 'ocean' }" />

Available Palettes

PaletteDescription
defaultBalanced palette suitable for most use cases
vibrantHigh-saturation colors for emphasis
pastelSoft, muted tones for lighter designs
monochromeShades of a single hue
earthWarm, natural tones (browns, greens, ambers)
oceanCool blues and teals
sunsetWarm gradient from orange to purple
corporateProfessional, subdued palette for business dashboards
neonBright, electric colors for dark backgrounds
accessibleHigh-contrast palette optimized for color blindness

Custom Color Arrays

For full control, pass an array of hex color strings instead of a palette name:

<script setup lang="ts">
const config = {
  series: [
    { name: 'Alpha', data: [10, 20, 30] },
    { name: 'Beta', data: [15, 25, 35] },
  ],
  xAxis: { categories: ['Q1', 'Q2', 'Q3'] },
  colors: ['#6366f1', '#f59e0b', '#10b981'],
}
</script>

<template>
  <MeldLineChart :config="config" />
</template>

Colors are assigned to series in order. If there are more series than colors, the palette cycles.

Mixed ChartEvents