:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_multiline_tooltip:


Multi-Line Tooltip
==================
This example shows how you can use selections and layers to create a
tooltip-like behavior tied to the x position of the cursor.
If you are looking for more standard tooltips, see the :ref:`gallery_multiline_tooltip_standard` example.

In this example, we'll employ a little trick to isolate the x-position of the
cursor: we add some transparent points with only an x encoding (no y encoding)
and tie a *nearest* selection to these, tied to the "x" field.


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


    import altair as alt
    import pandas as pd
    import numpy as np

    np.random.seed(42)
    columns = ["A", "B", "C"]
    source = pd.DataFrame(
        np.cumsum(np.random.randn(100, 3), 0).round(2),
        columns=columns, index=pd.RangeIndex(100, name="x")
    )
    source = source.reset_index().melt("x", var_name="category", value_name="y")

    # Create a selection that chooses the nearest point & selects based on x-value
    nearest = alt.selection_point(nearest=True, on="pointerover",
                                  fields=["x"], empty=False)

    # The basic line
    line = alt.Chart(source).mark_line(interpolate="basis").encode(
        x="x:Q",
        y="y:Q",
        color="category:N"
    )

    # Transparent selectors across the chart. This is what tells us
    # the x-value of the cursor
    selectors = alt.Chart(source).mark_point().encode(
        x="x:Q",
        opacity=alt.value(0),
    ).add_params(
        nearest
    )

    # Draw points on the line, and highlight based on selection
    points = line.mark_point().encode(
        opacity=alt.condition(nearest, alt.value(1), alt.value(0))
    )

    # Draw text labels near the points, and highlight based on selection
    text = line.mark_text(align="left", dx=5, dy=-5).encode(
        text=alt.condition(nearest, "y:Q", alt.value(" "))
    )

    # Draw a rule at the location of the selection
    rules = alt.Chart(source).mark_rule(color="gray").encode(
        x="x:Q",
    ).transform_filter(
        nearest
    )

    # Put the five layers into a chart and bind the data
    alt.layer(
        line, selectors, points, rules, text
    ).properties(
        width=600, height=300
    )


.. tab-set::

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

        .. code:: python


            import altair as alt
            import pandas as pd
            import numpy as np

            np.random.seed(42)
            columns = ["A", "B", "C"]
            source = pd.DataFrame(
                np.cumsum(np.random.randn(100, 3), 0).round(2),
                columns=columns, index=pd.RangeIndex(100, name="x")
            )
            source = source.reset_index().melt("x", var_name="category", value_name="y")

            # Create a selection that chooses the nearest point & selects based on x-value
            nearest = alt.selection_point(nearest=True, on="pointerover",
                                          fields=["x"], empty=False)

            # The basic line
            line = alt.Chart(source).mark_line(interpolate="basis").encode(
                x="x:Q",
                y="y:Q",
                color="category:N"
            )

            # Transparent selectors across the chart. This is what tells us
            # the x-value of the cursor
            selectors = alt.Chart(source).mark_point().encode(
                x="x:Q",
                opacity=alt.value(0),
            ).add_params(
                nearest
            )

            # Draw points on the line, and highlight based on selection
            points = line.mark_point().encode(
                opacity=alt.condition(nearest, alt.value(1), alt.value(0))
            )

            # Draw text labels near the points, and highlight based on selection
            text = line.mark_text(align="left", dx=5, dy=-5).encode(
                text=alt.condition(nearest, "y:Q", alt.value(" "))
            )

            # Draw a rule at the location of the selection
            rules = alt.Chart(source).mark_rule(color="gray").encode(
                x="x:Q",
            ).transform_filter(
                nearest
            )

            # Put the five layers into a chart and bind the data
            alt.layer(
                line, selectors, points, rules, text
            ).properties(
                width=600, height=300
            )


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

        .. code:: python


            import altair as alt
            import pandas as pd
            import numpy as np

            np.random.seed(42)
            columns = ["A", "B", "C"]
            source = pd.DataFrame(
                np.cumsum(np.random.randn(100, 3), 0).round(2),
                columns=columns, index=pd.RangeIndex(100, name="x")
            )
            source = source.reset_index().melt("x", var_name="category", value_name="y")

            # Create a selection that chooses the nearest point & selects based on x-value
            nearest = alt.selection_point(nearest=True, on="pointerover",
                                          fields=["x"], empty=False)

            # The basic line
            line = alt.Chart(source).mark_line(interpolate="basis").encode(
                x="x:Q",
                y="y:Q",
                color="category:N"
            )

            # Transparent selectors across the chart. This is what tells us
            # the x-value of the cursor
            selectors = alt.Chart(source).mark_point().encode(
                x="x:Q",
                opacity=alt.value(0),
            ).add_params(
                nearest
            )

            # Draw points on the line, and highlight based on selection
            points = line.mark_point().encode(
                opacity=alt.condition(nearest, alt.value(1), alt.value(0))
            )

            # Draw text labels near the points, and highlight based on selection
            text = line.mark_text(align="left", dx=5, dy=-5).encode(
                text=alt.condition(nearest, "y:Q", alt.value(" "))
            )

            # Draw a rule at the location of the selection
            rules = alt.Chart(source).mark_rule(color="gray").encode(
                x="x:Q",
            ).transform_filter(
                nearest
            )

            # Put the five layers into a chart and bind the data
            alt.layer(
                line, selectors, points, rules, text
            ).properties(
                width=600, height=300
            )