:orphan:
:html_theme.sidebar_secondary.remove:

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

.. _gallery_layered_chart_bar_mark:


Bar and Tick Chart
------------------
How to layer a tick chart on top of a bar chart.


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


    import altair as alt
    import pandas as pd

    source = pd.DataFrame({
        'project': ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
        'score': [25, 57, 23, 19, 8, 47, 8],
        'goal': [25, 47, 30, 27, 38, 19, 4]
    })

    bar = alt.Chart(source).mark_bar().encode(
        x='project',
        y='score'
    ).properties(
        width=alt.Step(40)  # controls width of bar.
    )

    tick = alt.Chart(source).mark_tick(
        color='red',
        thickness=2,
        size=40 * 0.9,  # controls width of tick.
    ).encode(
        x='project',
        y='goal'
    )

    bar + tick
    # 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
            import pandas as pd

            source = pd.DataFrame({
                'project': ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                'score': [25, 57, 23, 19, 8, 47, 8],
                'goal': [25, 47, 30, 27, 38, 19, 4]
            })

            bar = alt.Chart(source).mark_bar().encode(
                x='project',
                y='score'
            ).properties(
                width=alt.Step(40)  # controls width of bar.
            )

            tick = alt.Chart(source).mark_tick(
                color='red',
                thickness=2,
                size=40 * 0.9,  # controls width of tick.
            ).encode(
                x='project',
                y='goal'
            )

            bar + tick


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

        .. code:: python


            import altair as alt
            import pandas as pd

            source = pd.DataFrame({
                'project': ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                'score': [25, 57, 23, 19, 8, 47, 8],
                'goal': [25, 47, 30, 27, 38, 19, 4]
            })

            bar = alt.Chart(source).mark_bar().encode(
                x='project',
                y='score'
            ).properties(
                width=alt.Step(40)  # controls width of bar.
            )

            tick = alt.Chart(source).mark_tick(
                color='red',
                thickness=2,
                size=40 * 0.9,  # controls width of tick.
            ).encode(
                x='project',
                y='goal'
            )

            bar + tick
            # No channel encoding options are specified in this chart
            # so the code is the same as for the method-based syntax.