# PlotlyJS question: How to change color of stacked bar

**URL:** <https://discourse.julialang.org/t/plotlyjs-question-how-to-change-color-of-stacked-bar/103495>\
**Category:** Visualization\
**Tags:** plotting, bar, plotlyjs\
**Created:** [September 4, 2023, 7:04am UTC](https://discourse.julialang.org/t/plotlyjs-question-how-to-change-color-of-stacked-bar/103495 "2023-09-04T07:04:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nnguyengiatan](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/nnguyengiatan/32/48837_2.png) [@nnguyengiatan](https://discourse.julialang.org/u/nnguyengiatan)\
**Post date:** [September 4, 2023, 7:04am UTC](https://discourse.julialang.org/t/plotlyjs-question-how-to-change-color-of-stacked-bar/103495/1 "2023-09-04T07:04:22Z")

</div>

Hi all, I am using PlotlyJS.jl and trying to change color of stacked bar chart.

`p_turnover_s = plot( turnover_size_df, x=:year, y=:mean_turnover, color=:size, text=:mean_turnover, kind="bar", textposition="auto", labels=Dict( :year => "Năm", :mean_turnover => "Hiệu suất vòng quay vốn (Lần)", :size => "Quy mô", ), Layout(barmode="stack") )`

 ![test](https://global.discourse-cdn.com/julialang/original/3X/7/1/71acece77e0179dea16a424b257632c3584cc83d.png)  
I need to change the color of each **size** : “Quy mô lớn” to color #FFC000, “Quy mô nhỏ” to color #2E5894, “Quy mô siêu nhỏ” to color #4682B4, and “Quy mô vừa” to #B4A9A0.  
Some help would be very much appreciated. Thank you.

---

<div class="post-metadata">

**Author:** ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)\
**Post date:** [September 4, 2023, 7:23am UTC](https://discourse.julialang.org/t/plotlyjs-question-how-to-change-color-of-stacked-bar/103495/2 "2023-09-04T07:23:40Z")

</div>

Welcome to the forum.

To make it easier to reproduce the answer, could you post the data that makes the dataframe ` turnover_size_df` in your example?

---

<div class="post-metadata">

**Author:** ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)\
**Post date:** [September 4, 2023, 8:08am UTC](https://discourse.julialang.org/t/plotlyjs-question-how-to-change-color-of-stacked-bar/103495/3 "2023-09-04T08:08:05Z")

</div>

Here is an example:

```julia

using PlotlyJS, DataFrames

df = DataFrame([
  (String15("South Korea"), String7("gold"), 24)
(String15("China"), String7("gold"), 10)
(String15("Japan"), String7("gold"), 9)
(String15("South Korea"), String7("silver"), 13)
(String15("China"), String7("silver"), 15)
(String15("Japan"), String7("silver"), 12)
(String15("South Korea"), String7("bronze"), 11)
(String15("China"), String7("bronze"), 8)
(String15("Japan"), String7("bronze"), 12)])
rename!(df, [:nation, :medal, :count])

colour_dict = Dict("bronze" => "#be8557", "silver" => "#b4b4b4", "gold" => "#ffa500")

fig = Plot(df, kind="bar", x=:nation, y=:count, color=:medal, 
              Layout(barmode="stack") )

for trace in fig.data
  if trace[:name] in keys(colour_dict)
    trace[:marker][:color] = colour_dict[trace[:name]]
  end
end
relayout!(fig)
display(fig)

```