Forum Academy Marketplace Showcase Pricing Features

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

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:

Hi @Thimo,

Thanks for the quick reply and the suggestions.

Dylan

Hi @Thimo,

Just thought of something else. Is it possible to change the color fill of 1 series and not another?

So have one series which is solid and another which is a line?

Hi @dylanmartens this is not currently possible with Apexcharts. A certain fill color style will apply to all the data series. Maybe a future update of the ApexCharts.js library will enable this feature.

Update 4.1.0

1 - Events now also return the index of the clicked datapoint.

2 - Added the ’Start angle’ property to define the start angle for donut and bar charts.

3 - Rands (‘R’) currency added to the prefixes and suffixes list. @dylanmartens

4 - Upgraded to the latest version of Apexcharts.

Don’t forget to refresh your editor after upgrading

2 Likes

Update 4.2.0

1 - You can now specify a minimum and maximum value for the Y-axis! This feature is available for: Line charts, Area chart (single and multiple lines), Bar chart (single and multiple bars) and the Candlestick chart.

Don’t forget to refresh your editor after upgrading

2 Likes

Update 4.3.0

1 - Added the ‘Bar width’, ‘Bar height’ (for horizontal bar charts) and the ‘Starting shape’ property for the single and multiple bar charts.

Don’t forget to refresh your editor after updating

2 Likes

Hi! Question is possible to create a chart based off for one field for one item in the table?

Hi @mariel.vargas most of the charts needs a list of numbers (Y-axis data) and a lists of texts (X-axis data). If that field/item in the database can provide that it should work! :slight_smile:

2 Likes

Thanks Thimo!

Update 4.4.0

1 - The scatter chart now works with only 1 data series.

Don’t forget to refresh your editor after updating

1 Like

Hi @Thimo, great work with your plugin, I started using it a few days ago and it’s really beautiful and game changing for us, thank you so much for this wonderful job !!

I have two questions :

  • do you think it would be possible to do a scatter chart with unlimited numbers of series ?
  • do you think it could be possible to have two series for the radar chart ?

It would be awwwesome !

Thanks a lot !!

1 Like