background-image: url(img/logo_Saif.png) background-position: 97% 95% background-size: 10% layout: true --- class: inverse, center, middle # Creating 100% Stack bar chart with Highcharts ## A step by step guide <br> ### Saif Kabir Asif | 26 May 2020 ####<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;"> <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg> [<span style='color:white'> saifkabirasif.com]('https://saifkabirasif.com') ####<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" style="height:1em;fill:currentColor;position:relative;display:inline-block;top:.1em;"> <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg> [<span style='color:white'> @SaifKAsif]('https://twitter.com/SaifKAsif') --- ### 100% Stack Bar Chart with Highcharts ####**Background** I was trying to create 100% stack bar showing both number and percentage. Surprisingly enough, it was not easy to do as resources are scarce online. Hence, my humble effort to add this tutorial in the World Wide Web. ####**Packages Used** * **Tidyverse** - The almighty package * **Highcharter** - A cool R package by jkunst around Highcharts JS ####**Dataset** Games reviewed by users and critics for Playstation-4, Xbox One and Nintendo Switch up to May 2020 in Metacritic ([**Download here**](./data/df_wide.rds)). The structure is below- * **Content_Platform**: Console name * **D_20_Up** : Score between Critics and users are more than 20 points apart * **D_10_20** : Score between Critics and users are 10-20 points apart * **D_5_10** : Score between Critics and users are 5-10 points apart * **D_0_5** : Score between Critics and users are 0-5 points apart --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r *highchart(height = 500,width = 600 ) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% * hc_chart(type="bar") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% * hc_xAxis(categories=df_wide$Content_Platform) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% * hc_add_series(df_wide$D_0_5,name="0-5") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% * hc_add_series(df_wide$D_5_10,name="5-10") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% * hc_add_series(df_wide$D_10_20,name="10-20") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% * hc_add_series(df_wide$D_20_Up,name=">20") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% * hc_colors(colors = c("lightgreen","yellow","orange","red")) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% * hc_plotOptions(series=list(stacking="normal")) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% * hc_plotOptions(series=list(stacking="percent")) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% * hc_plotOptions(series=list(dataLabels = list(enabled = TRUE))) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% * hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)'))) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% * hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>') ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>')%>% * hc_yAxis(gridLineWidth=0) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>')%>% hc_yAxis(gridLineWidth=0)%>% * hc_yAxis(labels=list(enabled=FALSE)) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>')%>% hc_yAxis(gridLineWidth=0)%>% hc_yAxis(labels=list(enabled=FALSE))%>% * hc_yAxis(title=list(text="% of Releases")) ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>')%>% hc_yAxis(gridLineWidth=0)%>% hc_yAxis(labels=list(enabled=FALSE))%>% hc_yAxis(title=list(text="% of Releases"))%>% * hc_title(text="Gap between Critic and User metacritic scores") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>')%>% hc_yAxis(gridLineWidth=0)%>% hc_yAxis(labels=list(enabled=FALSE))%>% hc_yAxis(title=list(text="% of Releases"))%>% hc_title(text="Gap between Critic and User metacritic scores")%>% * hc_subtitle(text="(in a scale of 100)") ``` ] .panel2-stack_steps-auto[
] --- count: false ### On with the chart .panel1-stack_steps-auto[ ```r highchart(height = 500,width = 600 )%>% hc_chart(type="bar")%>% hc_xAxis(categories=df_wide$Content_Platform)%>% hc_add_series(df_wide$D_0_5,name="0-5")%>% hc_add_series(df_wide$D_5_10,name="5-10")%>% hc_add_series(df_wide$D_10_20,name="10-20")%>% hc_add_series(df_wide$D_20_Up,name=">20")%>% hc_colors(colors = c("lightgreen","yellow","orange","red"))%>% hc_plotOptions(series=list(stacking="normal"))%>% hc_plotOptions(series=list(stacking="percent"))%>% hc_plotOptions(series=list(dataLabels = list(enabled = TRUE)))%>% hc_plotOptions(series=list(dataLabels = list(format='{point.y} ({point.percentage:.0f}%)')))%>% hc_tooltip(pointFormat='{series.name} gap<br><b>{point.y} ({point.percentage:.0f}%)</b>')%>% hc_yAxis(gridLineWidth=0)%>% hc_yAxis(labels=list(enabled=FALSE))%>% hc_yAxis(title=list(text="% of Releases"))%>% hc_title(text="Gap between Critic and User metacritic scores")%>% hc_subtitle(text="(in a scale of 100)") ``` ] .panel2-stack_steps-auto[
] <style> .panel1-stack_steps-auto { color: black; width: 38.6060606060606%; float: left; padding-left: 1%; font-size: 80% } .panel2-stack_steps-auto { color: black; width: 59.3939393939394%; float: left; padding-left: 1%; font-size: 80% } .panel3-stack_steps-auto { color: black; width: NA%; float: left; padding-left: 1%; font-size: 80% } </style> --- ### Acknowledgements Knowledge has become truly open. The proof - I learnt valuable skills from the blogs of these decorated individuals without leaving my couch. * [Yihui Xie](https://yihui.org) - For giving us xaringan * [Alison Hill](https://alison.rbind.io) - For great intro to xaringan * [Evangeline Reynolds](https://evangelinereynolds.netlify.app) - For awesome flipbook tricks in xaringan * [Joshua Kunst](http://jkunst.com) - For highcharter and inspiring me to look at JS based charting <style type="text/css"> .remark-code{line-height: 1.5; font-size: 80%} </style>