Themes

Customize chart appearance with built-in and custom themes

Overview

React ECharts supports both built-in themes and custom theme configurations. Themes control colors, fonts, backgrounds, and other visual properties.

Built-in Themes

ECharts comes with a built-in dark theme:

import { EChartsReact } from 'react-echarts-library';

// Light theme (default)
<EChartsReact option={option} />

// Dark theme
<EChartsReact option={option} theme="dark" />

Custom Theme Object

Pass a theme configuration object directly:

const myTheme = {
  color: [
    '#5470c6',
    '#91cc75',
    '#fac858',
    '#ee6666',
    '#73c0de',
    '#3ba272',
    '#fc8452',
    '#9a60b4'
  ],
  backgroundColor: '#ffffff',
  textStyle: {
    color: '#333'
  }
};

<EChartsReact option={option} theme={myTheme} />

Theme Properties

Colors

The main color palette for series:

const theme = {
  color: [
    '#5470c6',  // Primary
    '#91cc75',  // Secondary
    '#fac858',  // Accent
    '#ee6666',  // Danger
    '#73c0de',  // Info
  ]
};

Background

const theme = {
  backgroundColor: '#1a1a2e',
  // Or transparent
  backgroundColor: 'transparent'
};

Text Styles

const theme = {
  textStyle: {
    color: '#333',
    fontFamily: 'Inter, sans-serif',
    fontSize: 12
  },
  title: {
    textStyle: {
      color: '#1a1a1a',
      fontSize: 18,
      fontWeight: 600
    },
    subtextStyle: {
      color: '#666',
      fontSize: 14
    }
  }
};

Axis Styles

const theme = {
  categoryAxis: {
    axisLine: {
      lineStyle: { color: '#ccc' }
    },
    axisTick: {
      lineStyle: { color: '#ccc' }
    },
    axisLabel: {
      color: '#666'
    },
    splitLine: {
      lineStyle: { color: '#eee' }
    }
  },
  valueAxis: {
    axisLine: {
      lineStyle: { color: '#ccc' }
    },
    splitLine: {
      lineStyle: { color: '#eee', type: 'dashed' }
    }
  }
};

Legend Styles

const theme = {
  legend: {
    textStyle: {
      color: '#333'
    }
  }
};

Tooltip Styles

const theme = {
  tooltip: {
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: '#333',
    textStyle: {
      color: '#fff'
    }
  }
};

Complete Theme Example

Here’s a complete dark theme:

const darkTheme = {
  color: [
    '#4992ff',
    '#7cffb2',
    '#fddd60',
    '#ff6e76',
    '#58d9f9',
    '#05c091',
    '#ff8a45',
    '#8d48e3'
  ],
  backgroundColor: '#100c2a',
  textStyle: {
    color: '#b9b8ce'
  },
  title: {
    textStyle: {
      color: '#eef1fa'
    },
    subtextStyle: {
      color: '#b9b8ce'
    }
  },
  legend: {
    textStyle: {
      color: '#b9b8ce'
    }
  },
  tooltip: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderColor: '#71708a',
    textStyle: {
      color: '#fff'
    }
  },
  categoryAxis: {
    axisLine: {
      lineStyle: { color: '#71708a' }
    },
    axisTick: {
      lineStyle: { color: '#71708a' }
    },
    axisLabel: {
      color: '#b9b8ce'
    },
    splitLine: {
      lineStyle: { color: '#2e2e3e' }
    }
  },
  valueAxis: {
    axisLine: {
      lineStyle: { color: '#71708a' }
    },
    axisTick: {
      lineStyle: { color: '#71708a' }
    },
    axisLabel: {
      color: '#b9b8ce'
    },
    splitLine: {
      lineStyle: { color: '#2e2e3e' }
    }
  }
};

function DarkChart() {
  return <EChartsReact option={option} theme={darkTheme} />;
}

Dynamic Theme Switching

Switch themes based on user preference:

import { useState, useEffect } from 'react';
import { EChartsReact } from 'react-echarts-library';

const lightTheme = {
  color: ['#5470c6', '#91cc75', '#fac858'],
  backgroundColor: '#ffffff',
  textStyle: { color: '#333' }
};

const darkTheme = {
  color: ['#4992ff', '#7cffb2', '#fddd60'],
  backgroundColor: '#1a1a2e',
  textStyle: { color: '#eee' }
};

function ThemedChart() {
  const [isDark, setIsDark] = useState(false);

  // Detect system preference
  useEffect(() => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    setIsDark(mediaQuery.matches);

    const handler = (e) => setIsDark(e.matches);
    mediaQuery.addEventListener('change', handler);
    return () => mediaQuery.removeEventListener('change', handler);
  }, []);

  return (
    <div>
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
      <EChartsReact
        option={option}
        theme={isDark ? darkTheme : lightTheme}
      />
    </div>
  );
}

Registering Global Themes

Register themes globally for reuse:

import * as echarts from 'echarts';

// Register custom theme
echarts.registerTheme('myTheme', {
  color: ['#c23531', '#2f4554', '#61a0a8'],
  backgroundColor: '#f4f4f4'
});

// Use registered theme by name
<EChartsReact option={option} theme="myTheme" />

ECharts Theme Builder

Use the official ECharts theme builder to create themes visually:

1. Visit ECharts Theme Builder
2. Customize colors and styles
3. Download as JSON
4. Import and use in your app

import customTheme from './custom-theme.json';

<EChartsReact option={option} theme={customTheme} />

Tips

1. Consistent colors - Use a cohesive color palette
2. Contrast - Ensure text is readable against backgrounds
3. Test both modes - Verify charts look good in light and dark
4. Accessibility - Use colors that work for colorblind users