Forum Academy Marketplace Showcase Pricing Features

[New plugin] Beautiful Customizable Charts and Graphs (ApexCharts.js)

Yes no problem!
This is good news. It will be a huge chart plugin for Bubble. Don’t hesitate if you need help :wink:
Keep up the good work :wink:

1 Like

Update 2.1 - Events added!

1 - The ‘Data point is clicked’ event is added for all charts (except the Radar chart)! For Line and Area charts there is an extra option visible in the property editor to enable the event for these type of charts. The other charts don’t need this option. I have added instructions on how to use this event in the plugin description. You can click on most of the charts on the demo page to see the events in action.

ezgif-7-abfe5c5a9c23

2 - A unique ID is no longer required!

3 - Thousands now have a comma as separator to increase readability.

4 - Added more suffix options.

5 - Improved the dropshadow on the tooltips. The dark tooltips will now have a dark dropshadow for example.

6 - The plugin handles data from API calls much better.

4 Likes

I think you should let user select option for thousand and decimal separator like bubble do. But this is a great improvment to trigger event on data click! Thanks!

1 Like

Hi Thimo,

Nice one! I´m with @Jici here. Thousands separator and decimal is crucial.

@Jici @ryanck Thanks for the feedback! I will definitely look into if I can give you more control over the thousands separator. I think the best way is if the user could select their own separator. I will make this a priority for the next update!

2 Likes

Update 3.0.0 - New chart: Candlestick!

1 - New: Candlestick chart! This chart uses OHLC (open-high-low-close) and timestamp data. This is great for finance/crypto apps! This chart is fully customizable and even supports events! See demo page

2 - The Radial chart has two extra fields that make it easier to use a single value.

3 - Fixed a bug that caused ‘NaN’ values with horizontal bar charts.

4 - Added the possibility to specify custom thousands separators! @jici @ryanck

5 - You can now change the inner donut size.

6 - Added an extra color field for donut and pie charts.

Don’t forget to refresh your editor after upgrading

5 Likes

Hello Thimo,

Here in Europe we put the € symbol after the number. Do you think it will be possible in a next update?

We say 1.200,35€ instead of €1.200,35.

Thanks a lot.

Hi @ryanck! I am also from Europe (The Netherlands), but it is common here to put the symbol in front of the amount, but that maybe differs between countries. I will take a look for you if I can add the currency prefixes to the suffixes list for the next update! :slight_smile:

Hey Thimo,

Yeah maybe I was wrong. It could be just in Spain then :slight_smile:

Thanks a lot.

Have a nice day.

Update 3.1.0

1 - All the charts now have an ‘Is loaded?’ state that will be set to ‘yes’ when the chart is loaded (doesn’t work yet with data from custom states). This is great for making custom loaders! Like this one from the demo page:

ezgif-3-f2d9a7841ffd

2 - You can now add unlimited more data series to the Bar chart 2 bars!


ezgif-1-1d4dbc7a5ddc

3- The new option ‘Show category on tooltip’ lets you show the category value on the tooltip (without showing the x-axis tooltip at the same time).

4 - Added the option ‘Enable fixed tooltip’ that fixes the position of the tooltip to the top left of the chart.

5 - Added the ability to place the data labels at the top of the columns for bar charts.

6 - The list with suffixes now also contains currencies.

7 - Added more marker style options for the Radar chart.

Don’t forget to refresh your editor after upgrading

5 Likes

Hi @Thimo
Recently subscribed to your plugin, really great work!
I have one question: I am unable to access (Area Graph) Series 3, Series 4 options as shown in the ‘Yearly Sales’ graph in my editor. It just shows Options for Series 1 and Series 2. How to enable multiple lines for this for the Area Graph?

1 Like

Hi @udaysy007! The multiple data series feature (series 3 and 4) for the Area chart and Bar chart is something that will launch in the next update. I already submitted the update last weekend, but it takes some time for Bubble to review those updates. I think it will be accepted somewhere in the coming week. I am using the demo page to test the charts, so those charts will automatically be on the latest version and that is why those options are visible. :slight_smile:

2 Likes

Just about to buy this and give it a go! Cant wait to get going i love working with great charts.

Thanks @Thimo

1 Like

@timgarrett111 Great to hear you like the plugin! There is a cool update coming this week that, among other things, introduces a new chart. Enjoy!

2 Likes

@Thimo The latest changes are great. This plugin is awesome. There are a few features which would be super helpful.

  1. For Two Line Area charts add the ability to specify the Series 2 Category list. Currently, if you have 2 time-series data sets where time-series 2 doesn’t have the same timestamps as time-series 1 its impossible (that I have found) to plot both data sets together, since you can only specify 1 Category list.

  2. For Single Line Area charts adding a trend line as an option would be amazing.

Just some thoughts. Much appreciated for the effort.

1 Like

@rivergalli Thank you for the feedback!

I will look into you first point but I am not sure if ApexCharts supports multiple data series for the X-axis (for the bar and area/lines charts). A trend line is also a very cool idea, but sadly ApexCharts doesn’t support trend lines. If they do, I will implement them!

Update 4.0.0

1 - Added the scatter chart! This chart supports up to 5 data series. Each data serie will require a Y-axis and X-axis value.

ezgif-4-651536cdb120

2 - Area chart - multiple lines AND Bar chart - multiple bars has now the option to add up to 4 data series right inside the element editor!

ezgif-7-3f5af0244671

ezgif-7-d159765055db

3 - You can now hide the X-axis and Y-axis labels separately!

4 - Added a re-render workflow action for each chart that draws the chart again.

5 - Added the ability to specify custom decimal separators.

6 - Fixed a bug that caused weird behaviour on page resize when a chart is dynamically altered.

7 - Fixed a bug that sometimes caused weird behaviour when hiding / showing series.

Don’t forget to refresh your editor after upgrading

4 Likes

@Thimo Thank you for taking a look.

Hi @Thimo,

I’m having a bit of trouble and hoping that you’d be able to help. I’m trying to create a graph which will show a forecast range (there’s a picture at the bottom with an example), but can’t seem to get this right. Below is a picture of the current graph.

I’m trying to do the following:

  • Reduce the number of labels on the x-axis, I’ve tried like crazy to do this. Am I missing something perhaps? The graph is dynamic and based upon the user’s input, so I can’t make this a static value.

  • I’m trying to change the shaded area so that you can only see the light orange part at the top. Essentially, I want to show the area between the Upper Forecast and the Lower Forecast, with the 70% Forecast being a straight line. I have tried to change the order of the series (currently the Upper Forecast is Series 1), but then when you hover over a data point, it shows the Lower Forecast at the top of the tooltip, which looks very wierd.

  • Lastly, is there a way to change the Y-axis prefix? I’m from South Africa and our currency is Rands (or “R” for short).

Here is an example of the type of graph that I’m trying to create:
Ellevest

Thanks for the help!
Dylan

1 Like

Hi @dylanmartens!

I have tried to implement ways to reduce the number of labels on the X-axis, but ApexCharts doesn’t seem to provide a way to do that with the values from the plugin inputs unfortunately . I would recommend to hide the X-axis labels and maybe create your own X-axis with dynamic data.

It is not possible to have one data series with a background color and one without. So I am afraid that it is not possible to create the chart style from your example image.

I will add your currency to the prefixes list! :slight_smile: