Forum Academy Marketplace Showcase Pricing Features

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

Biggest Update Yet - 2.0.0 - 2 New Elements (Heatmap & Radar)! - Workflow actions added!

1 - This major update introduces a new element, the Heatmap. This chart is fully customizable (just like the other charts). I does work a bit differently then the other charts so be sure to check the demo page. More customizability and features will be added in later updates. Big thanks to @jici for providing insight in his heatmap plugin for example code!

ezgif-3-c6ea358e34b7

2 - Also the Radar chart element is added! This chart is also fully customizable. See the demo page for a preview.

3 - New workflow action ‘Append Data Series’ for Area chart 2 - lines. This gives you the ability to append UNLIMITED more data series to your chart! See demo page.

Append data preview

4 - The action ‘show’ and ‘hide’ data series are also added for the Bar chart (2 bars) and Area chart (2 lines) to give you the ability to programatically hide and show data series. Keep in mind that workflow action work when the chart is loaded/visible. This is great for custom legends like this one:

5 - The plugin now handles searching for large amounts of data much better.

6 - Added the ‘fill color opacity’ field for bar charts.

7 - Replaced the remains color field for the bar chart 2 bars with native Bubble color pickers. Note: this may reset the color of the bar (multiple bars) chart.

8 - The ‘hideDuplicates’ property is now turned off for the x-axis.

Don’t forget to refresh your editor after upgrading

Because of the amount of new features and elements, bugs may be present. If you notice any bugs, please reach out via PM. Enjoy!

3 Likes

Thanks @Thimo
I was wondering if you add events?

@Jici Events will definitely be added! This update was already quite big, thats why I want to postpone it to a later update :slight_smile:

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