🍅 Plost - A deceptively simple plotting component for Streamlit

Show the Community!
1

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
2

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)

3

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
4

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
5

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

1 Like
6

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

6 Likes
7

Hi,

great work, thank you.

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

Greetings
mick76

1 Like
8

Added to

Streamlit App

9

What kind of line?

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

10

Like “add_hline” from plotly.

1 Like
11

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
12

Hi,

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

plost_grouped_bar
plost_grouped_bar408×567 29.7 KB

Thank you

13

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',
  ...
)
14

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

15

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

16

Me again :grinning:

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

Thank you

17

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.

18

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.