๐Ÿ… Plost - A deceptively simple plotting component for Streamlit

Last week at the Streamlit Hackathon I was planning on building an app with some cool chart snippets for you to copy/paste. But then I realized I could just as easily make it into a Streamlit Component :smiley:

The result isโ€ฆ

:tomato: Plost
GitHub repo
Sample app and documentation

LMK what you think!

11 Likes

This is amazingly easy to understand! Do you have an example of how to annotate specific points in a line chart? (Like arrow and/or text)

Awesome :slight_smile: love the naming :laughing:

Could you add it to the tracker Streamlit Components - Community Tracker :smiley: ? Itโ€™s growing a lot those past few weeks !

Fanilo :balloon:

1 Like

You canโ€™t do that yet, but Iโ€™ve been meaning to add it.

I was considering adding support for overlaying lines and/or text onto the charts. Is this what you had in mind?

As a side note, my goal here isnโ€™t to make a comprehensive library where everything is possible but rather one where the most commonly needed things are trivial. I think annotations fit the bill, but Iโ€™ll likely stop there. The only other major thing I expect to add are a couple types of common charts that Plost is still missing.

For complex charts you can always copy/paste the Vega-Lite specs from Plost (see the โ€œโ€ฆโ€ menu next to the chart in the Streamlit UI) and use them as a starting point for further customizations.

1 Like

Yes, that is what I had in mind. That would be great!

1 Like

Done! Check out the x_annot and y_annot fields I just added in version 0.2.0

6 Likes

Hi,

great work, thank you.

Is it possible to add a horizontal line to the chart?

Greetings
mick76

1 Like

Added to

Streamlit App

What kind of line?

If youโ€™re looking to add annotations, you can do it like this: https://share.streamlit.io/tvst/plost#annotations

Like โ€œadd_hlineโ€ from plotly.

1 Like

Ok, x_annot and y_annot works very well.

I use the plost.line_chart for some stock values, but if i change the stock, the chart will not be updated.
The line_chart from streamlit shows me the new chart, while plost still shows the old chart.

1 Like

Hi,

is it possible to sort the columns in the chart in the same order from the dataframe?

Thank you

This is happening because the Quartal column is not being interpreted as a date. To fix it, either change the values to actual dates or change to the column type to ordinal.

To interpret as dates:

  1. Make the values look like ISO dates: for example, โ€˜2020-12-31โ€™ instead of โ€˜4Q2020โ€™.
  2. Use Altair-style notation to tell Plost that โ€˜Quartalโ€™ should be interpreted as a temporal axis, by adding ':T" at the end of the column:
    plost.bar_chart(
      ...
      bar='Quartal:T',
      ...
    )
    

To interpret as ordinal: (simpler, but less semantically correct)

  • Use Altair-style notation to tell Plost that โ€˜Quartalโ€™ should be interpreted as an ordinal axis, by adding ':O" at the end of the column:
    plost.bar_chart(
      ...
      bar='Quartal:O',
      ...
    )
    

Oh, and make sure you have the latest Plost. I found a bug related to this, when investigating the issue :wink:

I use Plost 0.2.5, but with Quartal:O it still doesnt work.

Now i will try to change it to a date.

Edit:

df['Date'] = pd.to_datetime(df['Quartal'])+pd.offsets.QuarterEnd()
df['Date'] = pd.to_datetime(df['Date']).dt.date

does the job.

Thank you

Me again :grinning:

Is it possible to use other colors for negative values then for positives?

Thank you

My idea with Plost is to build only the bare minimum, and to send people to Vega-Lite/Altair/Plotly/etc if they want more. And here youโ€™re approaching the boundaries of that bare minimum :smiley:

But itโ€™s possible to do! (with some caveats around how the legend would behave, etc) Youโ€™d have to split your dataframe column into two: one with positive values and another with negatives.

hi thiago! thanks for sharing the repo and documentation.

sorry if this is beyond the bare minimum you reference in other comments. is there a way to graph variables / data that have different scales? would you suggest adjusting the scale before graphing?

i would like to have a line graph of one variable / column that is in the tens and another that is in the hundreds.

thanks for any support.