Feature Request: Ability to change color and order of series on bar chart

[slshults]

Feature request

Is your feature request related to a problem?

On a dashboard with similar bar charts, the similar values for the series can be displayed in different order, with different colors, on the different charts.

For example, in the screenshots below, each of the charts show two feedback responses, a Positive series, and a Negative series, but the colors and positions are reversed in the first chart, as compared to the other charts.

The first of the charts shows the bars for Negative responses in blue, in the lower part of the chart:

However, for both of the other two charts, the bars for Negative responses appear in purple, in the top part of the chart:

Describe the solution you'd like

We'd like to be able to control the color and relative position of each series so that similar charts will appear similarly when displayed side-by-side in dashboards.

Additional context

From: https://posthoghelp.zendesk.com/agent/tickets/14758

Debug info

No response

[niels-bosman]

Thanks for opening this! @slshults

[niels-bosman]

@pauldambra @Twixes Any chance this can get picked up? If not, maybe someone can guide me a little so I know how to contribute :)

[Twixes]

Hi @niels-bosman – we haven't been able to prioritize this short-term, but definitely happy to take contributions!

If you'd like to contribute to PostHog, follow our "Developing locally" guide and skim through our "Engineering" handbook section overall (e.g. conventions).

As for concrete solutions here, I think a simple potential one could be a "Breakdown coloring" selector in visualization options (see screenshot below), with two values:

• "By aggregate value"
• "By name"

[MarconLP]

related ticket: https://github.com/PostHog/posthog/issues/17593

[slshults]

+1 https://github.com/PostHog/posthog/issues/23093

[sumtzehern]

@Twixes, I am interested in adding this feature that allowed user to change color for the graph. This way user could have the ability to choose the color for the charts.

My current implementation is to show the series name on the option dropdown and make a drop down that have color options, I have created a prototype UI that looks as below,

Based on my current understanding, selecting a color would updates the graph's color and reflects this change on the dashboard. Any thoughts and suggestions on how to update the color for each charts after a color is selected. Any relevant files or methods would be helpful.

From my observations, it seems the the color option are defined in the colors.ts and updating the charts might need to be manually applied to each charts.