Show API reference for
  1. Contents
  2. st.area_chart
  3. element.add_rows

st.area_chart

Display an area chart.

This is syntax-sugar around st.altair_chart. The main difference is this command uses the data's own column and indices to figure out the chart's Altair spec. As a result this is easier to use for many "just plot this" scenarios, while being less customizable.

If st.area_chart does not guess the data specification correctly, try specifying your desired chart using st.altair_chart.

Function signature[source]

st.area_chart(data=None, *, x=None, y=None, color=None, width=None, height=None, use_container_width=True)

Parameters

data (pandas.DataFrame, pandas.Styler, pyarrow.Table, numpy.ndarray, pyspark.sql.DataFrame, snowflake.snowpark.dataframe.DataFrame, snowflake.snowpark.table.Table, Iterable, or dict)

Data to be plotted.

x (str or None)

Column name to use for the x-axis. If None, uses the data index for the x-axis.

y (str, Sequence of str, or None)

Column name(s) to use for the y-axis. If a Sequence of strings, draws several series on the same chart by melting your wide-format table into a long-format table behind the scenes. If None, draws the data of all remaining columns as data series.

color (str, tuple, Sequence of str, Sequence of tuple, or None)

The color to use for different series in this chart.

For an area chart with just 1 series, this can be:

  • None, to use the default color.
  • A hex string like "#ffaa00" or "#ffaa0088".
  • An RGB or RGBA tuple with the red, green, blue, and alpha components specified as ints from 0 to 255 or floats from 0.0 to 1.0.

For an area chart with multiple series, where the dataframe is in long format (that is, y is None or just one column), this can be:

  • None, to use the default colors.

  • The name of a column in the dataset. Data points will be grouped into series of the same color based on the value of this column. In addition, if the values in this column match one of the color formats above (hex string or color tuple), then that color will be used.

    For example: if the dataset has 1000 rows, but this column only contains the values "adult", "child", and "baby", then those 1000 datapoints will be grouped into three series whose colors will be automatically selected from the default palette.

    But, if for the same 1000-row dataset, this column contained the values "#ffaa00", "#f0f", "#0000ff", then then those 1000 datapoints would still be grouped into 3 series, but their colors would be "#ffaa00", "#f0f", "#0000ff" this time around.

For an area chart with multiple series, where the dataframe is in wide format (that is, y is a Sequence of columns), this can be:

  • None, to use the default colors.
  • A list of string colors or color tuples to be used for each of the series in the chart. This list should have the same length as the number of y values (e.g. color=["#fd0", "#f0f", "#04f"] for three lines).

width (int or None)

Desired width of the chart expressed in pixels. If width is None (default), Streamlit sets the width of the chart to fit its contents according to the plotting library, up to the width of the parent container. If width is greater than the width of the parent container, Streamlit sets the chart width to match the width of the parent container.

height (int or None)

Desired height of the chart expressed in pixels. If height is None (default), Streamlit sets the height of the chart to fit its contents according to the plotting library.

use_container_width (bool)

Whether to override width with the width of the parent container. If use_container_width is False (default), Streamlit sets the chart's width according to width. If use_container_width is True, Streamlit sets the width of the chart to match the width of the parent container.

Examples

Python
import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

st.area_chart(chart_data)
Built with Streamlit 🎈

You can also choose different columns to use for x and y, as well as set the color dynamically based on a 3rd column (assuming your dataframe is in long format):

Python
import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(
   {
       "col1": np.random.randn(20),
       "col2": np.random.randn(20),
       "col3": np.random.choice(["A", "B", "C"], 20),
   }
)

st.area_chart(chart_data, x="col1", y="col2", color="col3")
Built with Streamlit 🎈

Finally, if your dataframe is in wide format, you can group multiple columns under the y argument to show multiple series with different colors:

Python
import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["col1", "col2", "col3"])

st.area_chart(
   chart_data, x="col1", y=["col2", "col3"], color=["#FF0000", "#0000FF"]  # Optional
)
Built with Streamlit 🎈

element.add_rows

delete

Deprecation notice

We plan to deprecate .add_rows(). Please leave feedback.

Concatenate a dataframe to the bottom of the current one.

Function signature[source]

element.add_rows(data=None, **kwargs)

Parameters

data (pandas.DataFrame, pandas.Styler, pyarrow.Table, numpy.ndarray, pyspark.sql.DataFrame, snowflake.snowpark.dataframe.DataFrame, Iterable, dict, or None)

Table to concat. Optional.

**kwargs (pandas.DataFrame, numpy.ndarray, Iterable, dict, or None)

The named dataset to concat. Optional. You can only pass in 1 dataset (including the one in the data parameter).

Example

Python
import streamlit as st
import pandas as pd
import numpy as np

df1 = pd.DataFrame(np.random.randn(50, 20), columns=("col %d" % i for i in range(20)))

my_table = st.table(df1)

df2 = pd.DataFrame(np.random.randn(50, 20), columns=("col %d" % i for i in range(20)))

my_table.add_rows(df2)
# Now the table shown in the Streamlit app contains the data for
# df1 followed by the data for df2.

You can do the same thing with plots. For example, if you want to add more data to a line chart:

Python
# Assuming df1 and df2 from the example above still exist...
my_chart = st.line_chart(df1)
my_chart.add_rows(df2)
# Now the chart shown in the Streamlit app contains the data for
# df1 followed by the data for df2.

And for plots whose datasets are named, you can pass the data with a keyword argument where the key is the name:

Python
my_chart = st.vega_lite_chart({
    'mark': 'line',
    'encoding': {'x': 'a', 'y': 'b'},
    'datasets': {
      'some_fancy_name': df1,  # <-- named dataset
     },
    'data': {'name': 'some_fancy_name'},
}),
my_chart.add_rows(some_fancy_name=df2)  # <-- name used as keyword
arrow_backPrevious: Chart elementsarrow_forwardNext: st.bar_chart
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.