Ant Design Charts

Manual
Components
Examples
Options
Products
2.0.0

Introduction
Quick Start
Global Configuration
Upgrade
FAQ
Contact Us

Global Configuration

Previous

Quick Start

Next

Upgrade

Resources

Galacea Effects

Umi-React Application Framework

Dumi-Component doc generator

ahooks-React Hooks Library

Community

Ant Financial Experience Tech

SEE Conf-Experience Tech Conference

Help

More Productions

Ant Design-Enterprise UI design language

Yuque-Knowledge creation and Sharing tool

Egg-Enterprise-class Node development framework

Kitchen-Sketch Tool set

Galacean-互动图形解决方案

Liven Experience technology

© Copyright 2025 Ant Group Co., Ltd..备案号：京ICP备15032932号-38

Loading...

Ant Design Charts allows you to customize themes and component configuration to satisfy business and brand requirements. ConfigProvider component makes this possible.

Customize theme

You can pick a built-in theme:

import { ConfigProvider } from '@ant-design/charts';

<ConfigProvider common={{ theme: 'dark' }}>
  <MyApp />
</ConfigProvider>;

Or create your own theme:

import { ConfigProvider } from '@ant-design/charts';

<ConfigProvider
  common={{
    theme: {
      type: 'dark', // based on dark theme
      color: '#66ccff',
      category10: ['#123456', '#654321', ... ],
      axis: {
        labelFill: '#666666',
      }
    },
  }}
>
  <MyApp />
</ConfigProvider>;

👉 Check full theme options

Component configuration

Global component configuration make it easier and faster to create customized charts. All configuration of all kinds of charts are supported.

import { ConfigProvider } from '@ant-design/charts';

<ConfigProvider
  // For Line Chart
  line={{
    shape: 'smooth',
    style: {
      lineWidth: 2,
    },
  }}
  // For Pie Chart
  pie={{
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
  }}
>
  <MyApp />
</ConfigProvider>;