[Feature]: Changing pie chart color

[hubearmy]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

When the data is connected from api, you aren't allowed to alter the color for the pie graph.

Why should this be worked on?

It is important to change the color for the graph since color is a critical factor for user experience

[daaliachhak17]

ticket created in Jira-https://zemoso.atlassian.net/browse/TNOSB-530

[raushan3737]

Hi @hubearmy , i was trying to alter the chart color i am getting the option to alter chart color except pie chart. Currently i am loading data from statically, Can you please indicate which segment of chart should have the custom color for the below graph?

[hubearmy]

The color of the pie (the four colors inside) should be able to alter. I can't do that when the data is connected from api (js mode)/

Raushan Kumar Gupta @.***> 於 2024年8月20日 週二 下午5:57寫道：

Hi @hubearmy https://github.com/hubearmy , i was trying to alter the chart color i am getting the option to alter chart color except pie chart. Currently i am loading data from statically, Can you please indicate which segment of chart should have the custom color for the below graph? image.png (view on web) https://github.com/user-attachments/assets/825a0876-2d93-4f94-a094-cbe27805b55d

— Reply to this email directly, view it on GitHub https://github.com/appsmithorg/appsmith/issues/35737#issuecomment-2298460658, or unsubscribe https://github.com/notifications/unsubscribe-auth/BJ6EWQAILP523YPFZ6DWLQ3ZSMHI5AVCNFSM6AAAAABMW4A2G6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOJYGQ3DANRVHA . You are receiving this because you were mentioned.Message ID: @.***>

[raushan3737]

Hi @hubearmy , If we want to alter the color of each section of pie chart we need to take n input as each section will contain unique color. Please give your suggestion on it.

In case of other chart, we are applying one color only:

[hubearmy]

What I mean is there’s no place or way to alter the color of the pie chart when you series data is connected from database/api. [image: 螢幕擷取畫面_21-8-2024_104754_app.appsmith.com.jpeg]

Raushan Kumar Gupta @.***> 於 2024年8月21日 週三 上午10:36寫道：

Hi @hubearmy https://github.com/hubearmy , If we want to alter the color of each section of pie chart we need to take n input as each section will contain unique color. Please give your suggestion on it.

In case of other chart, we are applying one color only: image.png (view on web) https://github.com/user-attachments/assets/3ebf49b5-f161-4011-86db-6aa4bf960586

— Reply to this email directly, view it on GitHub https://github.com/appsmithorg/appsmith/issues/35737#issuecomment-2300347833, or unsubscribe https://github.com/notifications/unsubscribe-auth/BJ6EWQCRUJSJIKOTYTE4K7TZSP4JJAVCNFSM6AAAAABMW4A2G6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBQGM2DOOBTGM . You are receiving this because you were mentioned.Message ID: @.***>

[raushan3737]

Hi @hubearmy , Attached pic is not visible for me. Can you please provide the pic again. Like how you are connecting to api.

Points to consider: If we want to add the option to alter the color then, we have to take n input for the color for each section of pie chart so that it will contain unique color to represent various segment of the data.

Any thoughts on it.

[Sai6347]

Hi @hubearmy, can you please provide how you are connecting to API?

If we add data statically unique colors are coming on the pie chart automatically. For the other graphs we have an option to change the colors manually.

[NewToCoder123]

how can i make this work im out of idea cause even at SQL i already set the colour but still no return into the pie chart

[rahulbarwal]

@NewToCoder123, you can utilize the custom e-chart option within the chart types, allowing you to transform your data to meet your requirements. You can read more about it here. Here is an example:

{{{
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  color: ['#FFA69E', '#A8DADC', '#0F7173', '#A22C29', '#001514'], // Custom colors
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}}}

Please feel free to reach out, if you still have questions.