:orphan:
:html_theme.sidebar_secondary.remove:

.. This document is auto-generated by the altair-gallery extension. Do not modify directly.

.. _gallery_area_chart_gradient:


Area Chart with Gradient
------------------------
This example shows how to make an area chart with a gradient fill. 
For more information about gradient options see the Vega-Lite `Gradient documentation <https://vega.github.io/vega-lite/docs/types.html#gradient>`_.


.. altair-plot::
    :remove-code:
    



    import altair as alt
    from vega_datasets import data

    source = data.stocks()

    alt.Chart(source).transform_filter(
        'datum.symbol==="GOOG"'
    ).mark_area(
        line={'color':'darkgreen'},
        color=alt.Gradient(
            gradient='linear', 
            stops=[alt.GradientStop(color='white', offset=0), 
                   alt.GradientStop(color='darkgreen', offset=1)], 
            x1=1, 
            x2=1, 
            y1=1, 
            y2=0
        )
    ).encode(
        alt.X('date:T'), 
        alt.Y('price:Q')
    )# No channel encoding options are specified in this chart
    # so the code is the same as for the method-based syntax.


.. tab-set::

    .. tab-item:: Method syntax
        :sync: method

        .. code:: python



            import altair as alt
            from vega_datasets import data

            source = data.stocks()

            alt.Chart(source).transform_filter(
                'datum.symbol==="GOOG"'
            ).mark_area(
                line={'color':'darkgreen'},
                color=alt.Gradient(
                    gradient='linear', 
                    stops=[alt.GradientStop(color='white', offset=0), 
                           alt.GradientStop(color='darkgreen', offset=1)], 
                    x1=1, 
                    x2=1, 
                    y1=1, 
                    y2=0
                )
            ).encode(
                alt.X('date:T'), 
                alt.Y('price:Q')
            )

    .. tab-item:: Attribute syntax
        :sync: attribute

        .. code:: python



            import altair as alt
            from vega_datasets import data

            source = data.stocks()

            alt.Chart(source).transform_filter(
                'datum.symbol==="GOOG"'
            ).mark_area(
                line={'color':'darkgreen'},
                color=alt.Gradient(
                    gradient='linear', 
                    stops=[alt.GradientStop(color='white', offset=0), 
                           alt.GradientStop(color='darkgreen', offset=1)], 
                    x1=1, 
                    x2=1, 
                    y1=1, 
                    y2=0
                )
            ).encode(
                alt.X('date:T'), 
                alt.Y('price:Q')
            )# No channel encoding options are specified in this chart
            # so the code is the same as for the method-based syntax.