
:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_interactive_reorder_stacked_bars:


Reorder stacked bar segments
============================
This example uses a calculate transform
to check the values of the "site" column
vs the clicked values in the legend,
and assigns a lower order (0)
if there is a match.
The use of "indexOf" checks for equality in an array,
which here allows for multiple segments to be reordered
by holding down the shift key while clicking the legend.


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



    import altair as alt
    from altair.datasets import data

    selection = alt.selection_point(fields=['site'], bind='legend')

    source = data.barley.url

    alt.Chart(source).mark_bar().transform_calculate(
        site_order=f"if({selection.name}.site && indexof({selection.name}.site, datum.site) !== -1, 0, 1)"
    ).encode(
        x='sum(yield):Q',
        y='variety:N',
        color='site:N',
        order='site_order:N',
        opacity=alt.when(selection).then(alt.value(0.9)).otherwise(alt.value(0.2))
    ).add_params(
        selection
    )
    # 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 altair.datasets import data

            selection = alt.selection_point(fields=['site'], bind='legend')

            source = data.barley.url

            alt.Chart(source).mark_bar().transform_calculate(
                site_order=f"if({selection.name}.site && indexof({selection.name}.site, datum.site) !== -1, 0, 1)"
            ).encode(
                x='sum(yield):Q',
                y='variety:N',
                color='site:N',
                order='site_order:N',
                opacity=alt.when(selection).then(alt.value(0.9)).otherwise(alt.value(0.2))
            ).add_params(
                selection
            )


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

        .. code:: python



            import altair as alt
            from altair.datasets import data

            selection = alt.selection_point(fields=['site'], bind='legend')

            source = data.barley.url

            alt.Chart(source).mark_bar().transform_calculate(
                site_order=f"if({selection.name}.site && indexof({selection.name}.site, datum.site) !== -1, 0, 1)"
            ).encode(
                x='sum(yield):Q',
                y='variety:N',
                color='site:N',
                order='site_order:N',
                opacity=alt.when(selection).then(alt.value(0.9)).otherwise(alt.value(0.2))
            ).add_params(
                selection
            )
            # No channel encoding options are specified in this chart
            # so the code is the same as for the method-based syntax.
