.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "recipes/area_chart/plot_area_chart.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_recipes_area_chart_plot_area_chart.py>`
        to download the full example code.

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_recipes_area_chart_plot_area_chart.py:


Basic Area Chart
---------------------------

Area charts are similar to line charts, except that they shade the region below them and are stacked on top of each other. These can be useful to show a percent mix chart.

- Use ``mode="area"`` to create area charts
- Stacking behavior is enabled automatically

.. GENERATED FROM PYTHON SOURCE LINES 11-48





.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <div>            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG"></script><script type="text/javascript">if (window.MathJax && window.MathJax.Hub && window.MathJax.Hub.Config) {window.MathJax.Hub.Config({SVG: {font: "STIX-Web"}});}</script>                <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
            <script charset="utf-8" src="https://cdn.plot.ly/plotly-3.0.1.min.js"></script>                <div id="7c8282bf-73af-47c6-b983-82d2501f9419" class="plotly-graph-div" style="height:610px; width:100%;"></div>            <script type="text/javascript">                window.PLOTLYENV=window.PLOTLYENV || {};                                if (document.getElementById("7c8282bf-73af-47c6-b983-82d2501f9419")) {                    Plotly.newPlot(                        "7c8282bf-73af-47c6-b983-82d2501f9419",                        [{"fillcolor":"#0d4753","hovertemplate":"%{y:.1%}","line":{"color":"#0d4753","width":3},"name":"ABNB GBV Share","showlegend":true,"stackgroup":"y1","x":["2024-01-07T00:00:00","2024-01-14T00:00:00","2024-01-21T00:00:00","2024-01-28T00:00:00","2024-02-04T00:00:00","2024-02-11T00:00:00","2024-02-18T00:00:00","2024-02-25T00:00:00","2024-03-03T00:00:00","2024-03-10T00:00:00","2024-03-17T00:00:00","2024-03-24T00:00:00","2024-03-31T00:00:00","2024-04-07T00:00:00","2024-04-14T00:00:00","2024-04-21T00:00:00","2024-04-28T00:00:00","2024-05-05T00:00:00","2024-05-12T00:00:00","2024-05-19T00:00:00","2024-05-26T00:00:00","2024-06-02T00:00:00","2024-06-09T00:00:00","2024-06-16T00:00:00","2024-06-23T00:00:00","2024-06-30T00:00:00","2024-07-07T00:00:00","2024-07-14T00:00:00","2024-07-21T00:00:00","2024-07-28T00:00:00","2024-08-04T00:00:00","2024-08-11T00:00:00","2024-08-18T00:00:00","2024-08-25T00:00:00","2024-09-01T00:00:00","2024-09-08T00:00:00","2024-09-15T00:00:00","2024-09-22T00:00:00","2024-09-29T00:00:00","2024-10-06T00:00:00","2024-10-13T00:00:00","2024-10-20T00:00:00","2024-10-27T00:00:00"],"y":{"dtype":"f8","bdata":"tJkwXhqy6z+UUdtFdRrsP\u002fhXKGJGCOw\u002fdKiDVKL46z9W2KHV2xvsP1MElV4j\u002f+s\u002fOI6\u002frSzp6z9Mxp7r4i7sP6Zi3CJPe+w\u002fBXX3jzll7D8YxB6XVXPsPwKfrpOfHew\u002fMKmHVn626z+IiiS9kvrrP79VZ2a\u002fjus\u002fIc0t43mo6z\u002fIcDIlHpjrPzP+O7m97+s\u002faArGsP7D6z8JY8inA7vrP+JL7CxVjOs\u002f3k4Ki4W36z9+qQoT4SHsPzeyu0f2Jew\u002f\u002fSQUaDX96z+6grAOObrrP+4uG+vm2es\u002fgUuF1FO06z8ekcq70jTrPzySkoi23us\u002fVnazfjKI6z94MDcLu1DrP5PoymQJlOs\u002fRaihO3gZ6z80IzAKchrrPyyICtr1Pes\u002ffOjWT\u002fEH6z\u002fhgL0CRhjrP6w1i8kDTus\u002fp6dhWFbG6j\u002fZeOnM9tDqP\u002fBTBOTy4Oo\u002f7szlYjol6j8="},"yaxis":"y","type":"scatter"},{"fillcolor":"#e9514e","hovertemplate":"%{y:.1%}","line":{"color":"#e9514e","width":3},"name":"VRBO GBV Share","showlegend":true,"stackgroup":"y1","x":["2024-01-07T00:00:00","2024-01-14T00:00:00","2024-01-21T00:00:00","2024-01-28T00:00:00","2024-02-04T00:00:00","2024-02-11T00:00:00","2024-02-18T00:00:00","2024-02-25T00:00:00","2024-03-03T00:00:00","2024-03-10T00:00:00","2024-03-17T00:00:00","2024-03-24T00:00:00","2024-03-31T00:00:00","2024-04-07T00:00:00","2024-04-14T00:00:00","2024-04-21T00:00:00","2024-04-28T00:00:00","2024-05-05T00:00:00","2024-05-12T00:00:00","2024-05-19T00:00:00","2024-05-26T00:00:00","2024-06-02T00:00:00","2024-06-09T00:00:00","2024-06-16T00:00:00","2024-06-23T00:00:00","2024-06-30T00:00:00","2024-07-07T00:00:00","2024-07-14T00:00:00","2024-07-21T00:00:00","2024-07-28T00:00:00","2024-08-04T00:00:00","2024-08-11T00:00:00","2024-08-18T00:00:00","2024-08-25T00:00:00","2024-09-01T00:00:00","2024-09-08T00:00:00","2024-09-15T00:00:00","2024-09-22T00:00:00","2024-09-29T00:00:00","2024-10-06T00:00:00","2024-10-13T00:00:00","2024-10-20T00:00:00","2024-10-27T00:00:00"],"y":{"dtype":"f8","bdata":"L5k9h5Y3wT9ecyXRVSy\u002fPzdAve7Mvb8\u002fLV7xrXYdwD9IPfFSISG\u002fP7Huq4VyA8A\u002fH8cBSU1bwD+hzQmj6Ii+P83qHOmGJbw\u002f1FdEgDPWvD883wlHU2W8P+sHi2IDE78\u002fQFvhpQYmwT\u002fd1W0LtRXAPwSpYmYCxcE\u002fe8tIcxhewT\u002faPDZrh5\u002fBPzMHEBsJQcA\u002fXdbnPAXwwD\u002fcc95g8RPBP3bQTkyrzsE\u002fhMTW0+khwT8HtKpn9\u002fC+P0FuIsJN0L4\u002fCWyvXyoLwD8X9T3FGxfBP0dEk1NkmMA\u002f+dHqrbAuwT+Eu9UQtSzDPxC3td0lhcA\u002fpyYyBTbfwT8bPiPTE73CP7Jd1Gzar8E\u002f6155ER+awz8ucz\u002fXN5bDP1Df1ZcoCMM\u002fD16kwDrgwz97\u002fAn1557DP08p09nwx8I\u002fZmF5nqbmxD+dHFrMJLzEPz+w7m80fMQ\u002fRsxodBZrxz8="},"yaxis":"y","type":"scatter"}],                        {"template":{"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.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.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.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.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.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.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.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.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.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.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"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"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"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"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"#E5ECF6","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]},"layout":{"annotations":[{"align":"left","arrowcolor":"#444444","arrowhead":0,"arrowsize":0.5,"arrowwidth":1,"bgcolor":"rgba(255,255,255,0)","bordercolor":"rgba(255,255,255,0)","borderwidth":0,"font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"showarrow":false,"valign":"middle"}],"colorway":["#0d4753","#abd0d9","#f48d5c","#288b6f","#f4bb01","#e9514e","#19889F","#f8bca0","#61d1b1","#fedd71","#ef8280","#daeff2","#000000","#999999"],"font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"height":610,"hoverlabel":{"align":"left","bgcolor":"rgba(255,255,255,1)","bordercolor":"#F5F5F5","font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16}},"legend":{"bordercolor":"rgba(255,255,255,0)","font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"grouptitlefont":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"orientation":"h","title":{"font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"side":"top","text":""},"x":0.5,"xanchor":"center","xref":"container","y":0,"yanchor":"bottom","yref":"container"},"margin":{"b":80,"l":64,"r":64,"t":64},"paper_bgcolor":"rgba(255,255,255,0)","plot_bgcolor":"rgba(255,255,255,0)","separators":".,","shapes":[{"line":{"color":"#444444","dash":"dot","width":1},"type":"line"}],"title":{"font":{"size":18}},"xaxis":{"automargin":true,"color":"#999999","gridcolor":"#f3f3f3","linecolor":"#ebebeb","showline":true,"tickfont":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"title":{"font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"standoff":24}},"yaxis":{"automargin":true,"color":"#999999","gridcolor":"#f3f3f3","linecolor":"#ebebeb","showline":true,"tickfont":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"title":{"font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"standoff":24},"zerolinecolor":"#bfbfbf"},"yaxis2":{"automargin":true,"color":"#999999","gridcolor":"rgba(255,255,255,0)","linecolor":"#ebebeb","overlaying":"y","showline":true,"tickfont":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"title":{"font":{"color":"#444444","family":"Roboto,system-ui,sans-serif","size":16},"standoff":24},"zerolinecolor":"#bfbfbf"}}},"legend":{"title":{"text":""},"y":0},"xaxis":{"title":{"text":"Week Ending"},"tickangle":-45,"tickformat":"%m\u002f%d\u002f%y","type":"date","tickvals":["2024-01-07T00:00:00","2024-02-18T00:00:00","2024-03-31T00:00:00","2024-05-12T00:00:00","2024-06-23T00:00:00","2024-08-04T00:00:00","2024-09-15T00:00:00","2024-10-27T00:00:00"],"range":["2024-01-07T00:00:00","2024-10-27T00:00:00"],"spikecolor":"#636363","spikethickness":1},"yaxis":{"tickmode":"array","tickvals":[0.0,0.2,0.4,0.6,0.8,1.0],"tickformat":"0.0%","range":[0.0,1.0]},"hoverlabel":{"bgcolor":"rgba(255,255,255,1)","bordercolor":"#F5F5F5"},"hovermode":"x unified"},                        {"responsive": true}                    )                };            </script>        </div>
    </div>
    <br />
    <br />

.. code-block:: Python

    import pandas as pd
    from dateutil.relativedelta import relativedelta

    from visualization_toolkit.helpers.plotly import chart, axis, series


    fig = chart(
        pdf,
        x_axis=axis(
            column_name="day",
            axis_type="date",
            label="Week Ending",
            tick_interval=relativedelta(days=7 * 6),
        ),
        chart_series=[
            series(
                column_name="abnb_gbv_share",
                label="ABNB GBV Share",
                mode="area",
                color="dark-blue",
            ),
            series(
                column_name="vrbo_gbv_share",
                label="VRBO GBV Share",
                mode="area",
                color="red",
            ),
        ],
        y1_axis=axis(
            axis_type="percent",
            axis_min=0,
            axis_max=1,
            tick_format="0.0%",
        ),
    )

    fig


.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 3.607 seconds)


.. _sphx_glr_download_recipes_area_chart_plot_area_chart.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: plot_area_chart.ipynb <plot_area_chart.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: plot_area_chart.py <plot_area_chart.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: plot_area_chart.zip <plot_area_chart.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_