Give different color to each bar

Rahul7218 · May 29, 2024, 7:38am

i have create this dashboard but want to give different color to each bar like first “Yellow”, for second bar “Green” and for third bar “Purple” is this possible?

Manav_Mandli · May 29, 2024, 7:42am

Hii @Rahul7218

Please check once:

github.com/frappe/charts

Ability to add different colors for bars in the same dataset

frappe:master ← reksc:master

opened 10:24AM - 21 May 18 UTC

reksc

+61 -25

###### Explanation About What Code Achieves: This change to the BarChart adds… support for different bar colors within the same dataset. I had a particular use-case when the chart is dynamically updated with incoming data and depending on the value it should add a green/red bar respectively. Now the library supports array values inside `colors` option and will check for an array under `colors` attribute for each dataset when using `chart.update()` method. Some of the competitive libraries have this covered, but they miss the things I like about Frappe Charts. ###### Screenshots/GIFs: ![frappe-charts-different-bar-colors](https://user-images.githubusercontent.com/6311547/40301925-e2156be0-5ced-11e8-891a-9d5669105fa5.gif) ###### Steps To Test: 1. Define a chart and pass an array of colors under the first index of `colors` option (each root-level index represents a dataset, in our case there is a single dataset only). ```js testChart = new Chart("#chart-test", { title: "Bar Chart with custom colors per each bar", data: { labels: ["Sample 1", "Sample 2", "Sample 3", "Sample 4"], datasets: [{ "values": [500.412, 882.709, 421.700, 671.034], }], yRegions: [{ label: "Max", start: 500, end: 1000, options: { labelPos: 'right' } }] }, type: 'bar', height: 330, colors: [['#4dcd32', '#4dcd32', '#dd0453', '#4dcd32']], }); ``` 2. If needed, update the chart with an additional bar & color: ```js testChart.update({ labels: ["Sample 1", "Sample 2", "Sample 3", "Sample 4", "Sample 5"], datasets: [ { "values": [500.412, 882.709, 421.700, 671.034, 303.3], "colors": ['#4dcd32', '#4dcd32', '#dd0453', '#4dcd32', '#dd0453'], // we're in a context of a particular dataset } ], }); ``` ###### TODOs: - None

Rahul7218 · May 29, 2024, 9:44am

Where to insert this code?