{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Making Better Bar Charts" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "In Chapter 3, we learned how to make simple bar charts as well as stacked bar charts. This recipe is all about how to make these charts more impactful and aesthetically better. We will start with a simple stacked bar chart and iteratively improve it " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Getting Ready" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "For this recipe, we are going to create a `DataFrame` containing the Year-on-year changes in electricity demand by region from 2019 to 2025. " ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [], "source": [ "import pandas as pd" ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [], "source": [ "dta = pd.DataFrame(data=[\n", "[269.1, 716.9, 211.8, 455.0, 432.2, 503.1],\n", "[-120.6, 118.1, 114.5, 91.4, 88.6, 81.7],\n", "[-3.5, 51.3, 59.6, 42.4, 68.3, 74.8] ,\n", "[-77.3, 101.6, 109.5, -25.9, 50.5, 57.3],\n", "[-105.8, 125.6, -94.9, 39.5, 37.0, 40],\n", "[-151.4, 307.5, 97.6, 102.6, 182.5, 181.5]],\n", "index = [ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", "columns = [2020, 2021, 2022, 2023, 2024, 2025]\n", ").T.rename_axis('Year')\n" ] }, { "cell_type": "code", "execution_count": 3, "metadata": {}, "outputs": [], "source": [ "dta['Total'] = dta.sum(axis=1).values" ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
ChinaIndiaSoutheast AsiaUnited StatesEuropean UnionOthersTotal
Year
2020269.1-120.6-3.5-77.3-105.8-151.4-189.5
2021716.9118.151.3101.6125.6307.51421.0
2022211.8114.559.6109.5-94.997.6498.1
2023455.091.442.4-25.939.5102.6705.0
2024432.288.668.350.537.0182.5859.1
2025503.181.774.857.340.0181.5938.4
\n", "
" ], "text/plain": [ " China India Southeast Asia United States European Union Others \\\n", "Year \n", "2020 269.1 -120.6 -3.5 -77.3 -105.8 -151.4 \n", "2021 716.9 118.1 51.3 101.6 125.6 307.5 \n", "2022 211.8 114.5 59.6 109.5 -94.9 97.6 \n", "2023 455.0 91.4 42.4 -25.9 39.5 102.6 \n", "2024 432.2 88.6 68.3 50.5 37.0 182.5 \n", "2025 503.1 81.7 74.8 57.3 40.0 181.5 \n", "\n", " Total \n", "Year \n", "2020 -189.5 \n", "2021 1421.0 \n", "2022 498.1 \n", "2023 705.0 \n", "2024 859.1 \n", "2025 938.4 " ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "dta" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## How to do it" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "1. Import both the `plotly.express`and the `plotly.graph_objects` modules as `px` and `go`, respectively" ] }, { "cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [], "source": [ "import plotly.express as px\n", "import plotly.graph_objects as go" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "1. Create a simple stacked bar chart using the `bar` function from the module `px`. This is going to be our starting point " ] }, { "cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=China
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=India
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=Southeast Asia
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=United States
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=European Union
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=Others
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" } ], "layout": { "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "title": { "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "text": "value" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "2. The next stept is to add the information in the `'Totals'` column. We will do this by overlying a scatter over the bar chart in order to highlight the overall trend. To do this, call the method `add_scatter` on the `Figure` object. Note that we are setting `mode=\"markers\", so the scatter shows only the markers and not the lines connecting them" ] }, { "cell_type": "code", "execution_count": 17, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=China
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=India
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=Southeast Asia
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=United States
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=European Union
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=Others
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "title": { "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "text": "value" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "3. Customise the gap between each bar by using the method `update_layout` and setting the argumen `bargap`. In this case, we want to make the gap slightly wider in order to make the chart less crowded " ] }, { "cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=China
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=India
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=Southeast Asia
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=United States
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=European Union
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "%{hovertext}

variable=Others
Year=%{x}
value=%{y}", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "bargap": 0.5, "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "title": { "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "text": "value" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "4. Customise the contents and format of the hover template. Note that we can use HTM elements such as `
` and ``" ] }, { "cell_type": "code", "execution_count": 9, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "hovertemplate": "
%{x}
%{y:.2f} Twh ", "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "bargap": 0.5, "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "#E5ECF6", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "white", "linecolor": "white", "minorgridcolor": "white", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "#E5ECF6", "showlakes": true, "showland": true, "subunitcolor": "white" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "#E5ECF6", "polar": { "angularaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "radialaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "yaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" }, "zaxis": { "backgroundcolor": "#E5ECF6", "gridcolor": "white", "gridwidth": 2, "linecolor": "white", "showbackground": true, "ticks": "", "zerolinecolor": "white" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "baxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" }, "bgcolor": "#E5ECF6", "caxis": { "gridcolor": "white", "linecolor": "white", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "white", "linecolor": "white", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "white", "zerolinewidth": 2 } } }, "title": { "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "text": "value" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "\n", "fig.update_traces(hovertemplate ='
%{x}
'+ '%{y:.2f} Twh ')\n", "\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "5. Use the method `update_layout` to change the overall visuals of the chart by setting a `template`" ] }, { "cell_type": "code", "execution_count": 10, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "hovertemplate": "
%{x}
%{y:.2f} Twh ", "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "bargap": 0.5, "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "white", "showlakes": true, "showland": true, "subunitcolor": "#C8D4E3" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "white", "polar": { "angularaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" }, "bgcolor": "white", "radialaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "yaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "zaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "baxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "bgcolor": "white", "caxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 } } }, "title": { "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "text": "value" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "\n", "fig.update_traces(hovertemplate ='
%{x}
'+ '%{y:.2f} Twh ')\n", "\n", "fig.update_layout(template=\"plotly_white\")\n", "\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "6. Customise the axes titles and its format by using the methods:\n", " \n", " -`update_yaxes`\n", " \n", " -`update_xaxes`" ] }, { "cell_type": "code", "execution_count": 11, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "hovertemplate": "
%{x}
%{y:.2f} Twh ", "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "bargap": 0.5, "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "white", "showlakes": true, "showland": true, "subunitcolor": "#C8D4E3" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "white", "polar": { "angularaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" }, "bgcolor": "white", "radialaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "yaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "zaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "baxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "bgcolor": "white", "caxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 } } }, "title": { "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "TWh" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "\n", "fig.update_traces(hovertemplate ='
%{x}
'+ '%{y:.2f} Twh ')\n", "\n", "# Add a template\n", "fig.update_layout(template=\"plotly_white\")\n", "\n", "# Axis title and format\n", "fig.update_yaxes(title_text=\"TWh\", title_font_size=10, title_font_family='PT Serif Caption')\n", "fig.update_xaxes(title_text=\"Year\", title_font_size=10, title_font_family='PT Serif Caption')\n", "\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "7. Use the method `updat_layout` to customise the format of the title to match the axes' labels" ] }, { "cell_type": "code", "execution_count": 19, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "hovertemplate": "
%{x}
%{y:.2f} Twh ", "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "bargap": 0.5, "barmode": "relative", "height": 600, "legend": { "title": { "text": "variable" }, "tracegroupgap": 0 }, "margin": { "b": 120, "l": 100, "pad": 5, "r": 100, "t": 100 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "white", "showlakes": true, "showland": true, "subunitcolor": "#C8D4E3" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "white", "polar": { "angularaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" }, "bgcolor": "white", "radialaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "yaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "zaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "baxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "bgcolor": "white", "caxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 } } }, "title": { "font": { "family": "PT Serif Caption", "size": 14 }, "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "TWh" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "\n", "fig.update_traces(hovertemplate ='
%{x}
'+ '%{y:.2f} Twh ')\n", "\n", "fig.update_layout(template=\"plotly_white\")\n", "\n", "# Axis title and format\n", "fig.update_yaxes(title_text=\"TWh\", title_font_size=10, title_font_family='PT Serif Caption')\n", "fig.update_xaxes(title_text=\"Year\", title_font_size=10, title_font_family='PT Serif Caption')\n", "\n", "\n", "# Figure title format\n", "fig.update_layout(margin=dict(l=100, r=100, t=100, b=120, pad=5),\n", " title_font_size=14,\n", " title_font_family='PT Serif Caption')\n", "\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "8. Change the location and format of the legend by calling the method `update_layout` and setting the argument `legend`" ] }, { "cell_type": "code", "execution_count": 20, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "hovertemplate": "
%{x}
%{y:.2f} Twh ", "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "bargap": 0.5, "barmode": "relative", "height": 600, "legend": { "font": { "color": "black", "family": "Courier", "size": 10 }, "orientation": "h", "title": { "text": "" }, "tracegroupgap": 0 }, "margin": { "b": 120, "l": 100, "pad": 5, "r": 100, "t": 100 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "white", "showlakes": true, "showland": true, "subunitcolor": "#C8D4E3" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "white", "polar": { "angularaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" }, "bgcolor": "white", "radialaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "yaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "zaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "baxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "bgcolor": "white", "caxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 } } }, "title": { "font": { "family": "PT Serif Caption", "size": 14 }, "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "Year" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "TWh" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " height=600, width=900,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "\n", "fig.update_traces(hovertemplate ='
%{x}
'+ '%{y:.2f} Twh ')\n", "\n", "fig.update_layout(template=\"plotly_white\")\n", "\n", "# Axis title and format\n", "fig.update_yaxes(title_text=\"TWh\", title_font_size=10, title_font_family='PT Serif Caption')\n", "fig.update_xaxes(title_text=\"Year\", title_font_size=10, title_font_family='PT Serif Caption')\n", "\n", "\n", "# Figure title format\n", "fig.update_layout(margin=dict(l=100, r=100, t=100, b=120, pad=5),\n", " title_font_size=14,\n", " title_font_family='PT Serif Caption')\n", "\n", "\n", "# Legend location and format\n", "fig.update_layout(legend={\n", " \"title\": \"\",\n", " \"orientation\":\"h\",\n", " \"font\": dict(\n", " family=\"Courier\",\n", " size=10,\n", " color=\"black\"\n", " ),\n", " },)\n", "\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "9. To finish our improved bar chart, let's add a footnote with information about the source for the underlying data" ] }, { "cell_type": "code", "execution_count": 21, "metadata": {}, "outputs": [ { "data": { "application/vnd.plotly.v1+json": { "config": { "plotlyServerURL": "https://plot.ly" }, "data": [ { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "China", "marker": { "color": "rgb(102, 197, 204)", "pattern": { "shape": "" } }, "name": "China", "offsetgroup": "China", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ 269.1, 716.9, 211.8, 455, 432.2, 503.1 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "India", "marker": { "color": "rgb(246, 207, 113)", "pattern": { "shape": "" } }, "name": "India", "offsetgroup": "India", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -120.6, 118.1, 114.5, 91.4, 88.6, 81.7 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Southeast Asia", "marker": { "color": "rgb(248, 156, 116)", "pattern": { "shape": "" } }, "name": "Southeast Asia", "offsetgroup": "Southeast Asia", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -3.5, 51.3, 59.6, 42.4, 68.3, 74.8 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "United States", "marker": { "color": "rgb(220, 176, 242)", "pattern": { "shape": "" } }, "name": "United States", "offsetgroup": "United States", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -77.3, 101.6, 109.5, -25.9, 50.5, 57.3 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "European Union", "marker": { "color": "rgb(135, 197, 95)", "pattern": { "shape": "" } }, "name": "European Union", "offsetgroup": "European Union", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -105.8, 125.6, -94.9, 39.5, 37, 40 ], "yaxis": "y" }, { "alignmentgroup": "True", "hovertemplate": "
%{x}
%{y:.2f} Twh ", "hovertext": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "legendgroup": "Others", "marker": { "color": "rgb(158, 185, 243)", "pattern": { "shape": "" } }, "name": "Others", "offsetgroup": "Others", "orientation": "v", "showlegend": true, "textposition": "auto", "type": "bar", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "xaxis": "x", "y": [ -151.4, 307.5, 97.6, 102.6, 182.5, 181.5 ], "yaxis": "y" }, { "hovertemplate": "
%{x}
%{y:.2f} Twh ", "mode": "markers", "name": "Total", "type": "scatter", "x": [ 2020, 2021, 2022, 2023, 2024, 2025 ], "y": [ -189.49999999999997, 1421, 498.1, 705, 859.0999999999999, 938.4 ] } ], "layout": { "annotations": [ { "font": { "family": "PT Serif Caption", "size": 11 }, "showarrow": false, "text": "Source: International Energy Agency (2024)", "x": 1, "xref": "paper", "y": -0.25, "yref": "paper" } ], "bargap": 0.5, "barmode": "relative", "height": 600, "hoverlabel": { "bgcolor": "white", "font": { "family": "Courier", "size": 12 } }, "legend": { "font": { "color": "black", "family": "Courier", "size": 10 }, "orientation": "h", "title": { "text": "" }, "tracegroupgap": 0 }, "margin": { "b": 120, "l": 100, "pad": 5, "r": 100, "t": 100 }, "template": { "data": { "bar": [ { "error_x": { "color": "#2a3f5f" }, "error_y": { "color": "#2a3f5f" }, "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "bar" } ], "barpolar": [ { "marker": { "line": { "color": "white", "width": 0.5 }, "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "barpolar" } ], "carpet": [ { "aaxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "baxis": { "endlinecolor": "#2a3f5f", "gridcolor": "#C8D4E3", "linecolor": "#C8D4E3", "minorgridcolor": "#C8D4E3", "startlinecolor": "#2a3f5f" }, "type": "carpet" } ], "choropleth": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "choropleth" } ], "contour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "contour" } ], "contourcarpet": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "contourcarpet" } ], "heatmap": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmap" } ], "heatmapgl": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "heatmapgl" } ], "histogram": [ { "marker": { "pattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 } }, "type": "histogram" } ], "histogram2d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2d" } ], "histogram2dcontour": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "histogram2dcontour" } ], "mesh3d": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "type": "mesh3d" } ], "parcoords": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "parcoords" } ], "pie": [ { "automargin": true, "type": "pie" } ], "scatter": [ { "fillpattern": { "fillmode": "overlay", "size": 10, "solidity": 0.2 }, "type": "scatter" } ], "scatter3d": [ { "line": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatter3d" } ], "scattercarpet": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattercarpet" } ], "scattergeo": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergeo" } ], "scattergl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattergl" } ], "scattermapbox": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scattermapbox" } ], "scatterpolar": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolar" } ], "scatterpolargl": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterpolargl" } ], "scatterternary": [ { "marker": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "type": "scatterternary" } ], "surface": [ { "colorbar": { "outlinewidth": 0, "ticks": "" }, "colorscale": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "type": "surface" } ], "table": [ { "cells": { "fill": { "color": "#EBF0F8" }, "line": { "color": "white" } }, "header": { "fill": { "color": "#C8D4E3" }, "line": { "color": "white" } }, "type": "table" } ] }, "layout": { "annotationdefaults": { "arrowcolor": "#2a3f5f", "arrowhead": 0, "arrowwidth": 1 }, "autotypenumbers": "strict", "coloraxis": { "colorbar": { "outlinewidth": 0, "ticks": "" } }, "colorscale": { "diverging": [ [ 0, "#8e0152" ], [ 0.1, "#c51b7d" ], [ 0.2, "#de77ae" ], [ 0.3, "#f1b6da" ], [ 0.4, "#fde0ef" ], [ 0.5, "#f7f7f7" ], [ 0.6, "#e6f5d0" ], [ 0.7, "#b8e186" ], [ 0.8, "#7fbc41" ], [ 0.9, "#4d9221" ], [ 1, "#276419" ] ], "sequential": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ], "sequentialminus": [ [ 0, "#0d0887" ], [ 0.1111111111111111, "#46039f" ], [ 0.2222222222222222, "#7201a8" ], [ 0.3333333333333333, "#9c179e" ], [ 0.4444444444444444, "#bd3786" ], [ 0.5555555555555556, "#d8576b" ], [ 0.6666666666666666, "#ed7953" ], [ 0.7777777777777778, "#fb9f3a" ], [ 0.8888888888888888, "#fdca26" ], [ 1, "#f0f921" ] ] }, "colorway": [ "#636efa", "#EF553B", "#00cc96", "#ab63fa", "#FFA15A", "#19d3f3", "#FF6692", "#B6E880", "#FF97FF", "#FECB52" ], "font": { "color": "#2a3f5f" }, "geo": { "bgcolor": "white", "lakecolor": "white", "landcolor": "white", "showlakes": true, "showland": true, "subunitcolor": "#C8D4E3" }, "hoverlabel": { "align": "left" }, "hovermode": "closest", "mapbox": { "style": "light" }, "paper_bgcolor": "white", "plot_bgcolor": "white", "polar": { "angularaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" }, "bgcolor": "white", "radialaxis": { "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "" } }, "scene": { "xaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "yaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" }, "zaxis": { "backgroundcolor": "white", "gridcolor": "#DFE8F3", "gridwidth": 2, "linecolor": "#EBF0F8", "showbackground": true, "ticks": "", "zerolinecolor": "#EBF0F8" } }, "shapedefaults": { "line": { "color": "#2a3f5f" } }, "ternary": { "aaxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "baxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" }, "bgcolor": "white", "caxis": { "gridcolor": "#DFE8F3", "linecolor": "#A2B1C6", "ticks": "" } }, "title": { "x": 0.05 }, "xaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 }, "yaxis": { "automargin": true, "gridcolor": "#EBF0F8", "linecolor": "#EBF0F8", "ticks": "", "title": { "standoff": 15 }, "zerolinecolor": "#EBF0F8", "zerolinewidth": 2 } } }, "title": { "font": { "family": "PT Serif Caption", "size": 14 }, "text": "Year-on-year change in electricity demand by
region, 2020-2025" }, "width": 900, "xaxis": { "anchor": "y", "domain": [ 0, 1 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "" } }, "yaxis": { "anchor": "x", "domain": [ 0, 1 ], "range": [ -750, 1750 ], "title": { "font": { "family": "PT Serif Caption", "size": 10 }, "text": "TWh" } } } } }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fig = px.bar(dta, x=dta.index, y=[ 'China', 'India', 'Southeast Asia', 'United States', 'European Union', 'Others'],\n", " hover_name=dta.index, \n", " color_discrete_sequence= px.colors.qualitative.Pastel,\n", " title='Year-on-year change in electricity demand by
region, 2020-2025')\n", "\n", "fig.add_scatter(x=dta.index, y=dta.Total, mode=\"markers\", name=\"Total\")\n", "\n", "fig.update_layout(template=\"plotly_white\")\n", "\n", "fig.update_traces(hovertemplate ='
%{x}
'+ '%{y:.2f} Twh ')\n", "\n", "fig.update_layout(bargap=0.5) # gap between bars of adjacent location coordinates.\n", "\n", "fig.update_layout(dict(yaxis={'anchor': 'x', 'range': [-750, 1750], }))\n", "\n", "# Figure title and labels\n", "fig.update_layout(height=600, width=900, margin=dict(l=100, r=100, t=100, b=120, pad=5),\n", " title_font_size=14,\n", " title_font_family='PT Serif Caption')\n", "\n", "fig.update_yaxes(title_text=\"TWh\", title_font_size=10, title_font_family='PT Serif Caption')\n", "fig.update_xaxes(title_text=\"\", title_font_size=10, title_font_family='PT Serif Caption')\n", "# fig.update_layout(yaxis= dict(title='TWh', tickfont = dict(size=10)), xaxis=dict(title=''))\n", "\n", "\n", "# Footnotes\n", "fig.add_annotation(xref='paper', x=1.0, yref='paper', y=-0.25,\n", " text=\"Source: International Energy Agency (2024)\", showarrow=False,\n", " font=dict(size=11,\n", " # color='#a70684',\n", " family='PT Serif Caption'))\n", "\n", "fig.update_layout(\n", " hoverlabel=dict(\n", " bgcolor=\"white\",\n", " font_size=12,\n", " font_family=\"Courier\"\n", " )\n", ")\n", "\n", "# Legend location and format\n", "fig.update_layout(legend={\n", " \"title\": \"\",\n", " \"orientation\":\"h\",\n", " # \"yanchor\":\"top\",\n", " # \"title_font_family\": \"Times New Roman\",\n", " \"font\": dict(\n", " family=\"Courier\",\n", " size=10,\n", " color=\"black\"\n", " ),\n", " # \"bgcolor\": \"Gold\",\n", " },)\n", "\n", "\n", "fig.show()" ] } ], "metadata": { "kernelspec": { "display_name": ".venv", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.11.4" } }, "nbformat": 4, "nbformat_minor": 2 }