ant-design / ant-design-charts

A React Chart Library
https://ant-design-charts.antgroup.com/
MIT License
1.93k stars 362 forks source link

Unable to change pie chart color 🐛[BUG] #2508

Closed xsvato01 closed 6 months ago

xsvato01 commented 6 months ago

Hi, I am unable to simply change the default colors for Pie chart:

import { Pie } from '@ant-design/plots';

const DemoPie = () => {
  const config = {
    data: [
      { sex: '男', sold: 0.45 },
      { sex: '女', sold: 0.55 },
    ],
    angleField: 'sold',
    colorField: 'sex',
    color: ['red', 'blue'],
  };
  return <Pie {...config} />;
};

export default DemoPie;

From what I found, the color could be set as an array or as a callback. None of those options work for me.. https://antv-g2plot-v1.gitee.io/zh/examples/pie/basic/API#%E5%9B%BE%E5%BD%A2%E6%A0%B7%E5%BC%8F

I am also getting many parsing errors like:

WARNING in ./node_modules/@antv/util/esm/path/util/segment-quad-factory.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/.../node_modules/@antv/util/esm/path/util/src/path/util/segment-quad-factory.ts' file: Error: ENOENT: no such file or directory, open '/.../node_modules/@antv/util/esm/path/util/src/path/util/segment-quad-factory.ts'
lxfu1 commented 6 months ago
scale: {
  color: {
      range: ['red', 'blue']
  }
}

OR

style: { fill: callback }
xsvato01 commented 6 months ago

Sweet, thank you! Can I ask where did you find this? I do not see it at https://ant-design-charts.antgroup.com/en/options/plots/scale/

darshakey commented 2 weeks ago

I am using the funnel chart and same issue I am not able to change the color

Here is my config code and I am using latest version of this library @ant-design/plots

    data: data,
    xField: "stage",
    yField: "number",
    height: 325,
    isTransposed: false,
    colorField: "stage",
    color: ["#3b82f6", "#8b5cf6", "#FFBF00", "#8F00FF", "#50C878", "#FFC0CB"],

can anyone help me resolving this issue ?

darshakey commented 2 weeks ago

@lxfu1