:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_interval_selection:


Interval Selection
==================

This is an example of creating a stacked chart for which the domain of the
top chart can be selected by interacting with the bottom chart.


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


    import altair as alt
    from vega_datasets import data

    source = data.sp500.url

    brush = alt.selection_interval(encodings=['x'])

    base = alt.Chart(source).mark_area().encode(
        x = 'date:T',
        y = 'price:Q'
    ).properties(
        width=600,
        height=200
    )

    upper = base.encode(
        alt.X('date:T', scale=alt.Scale(domain=brush))
    )

    lower = base.properties(
        height=60
    ).add_params(brush)

    upper & lower


.. tab-set::

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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.sp500.url

            brush = alt.selection_interval(encodings=['x'])

            base = alt.Chart(source, width=600, height=200).mark_area().encode(
                x = 'date:T',
                y = 'price:Q'
            )

            upper = base.encode(
                alt.X('date:T').scale(domain=brush)
            )

            lower = base.properties(
                height=60
            ).add_params(brush)

            upper & lower


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

        .. code:: python


            import altair as alt
            from vega_datasets import data

            source = data.sp500.url

            brush = alt.selection_interval(encodings=['x'])

            base = alt.Chart(source).mark_area().encode(
                x = 'date:T',
                y = 'price:Q'
            ).properties(
                width=600,
                height=200
            )

            upper = base.encode(
                alt.X('date:T', scale=alt.Scale(domain=brush))
            )

            lower = base.properties(
                height=60
            ).add_params(brush)

            upper & lower