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

[Thimo]

Hi everybody,

I just published a plugin that provides a beautiful chart/graph solution for your application. This plugin contains the following charts:

1 - Area chart
2 - Area chart - multiple lines (you can append unlimited more data series using workflows!)
3 - Line chart
4 - Bar chart
5 - Bar chart - multiple bars (you can append unlimited more data series using workflows!)
6 - Donut chart
7 - Pie chart
8 - Radial chart
9 - Radar chart (supports multiple data series)
10 - Heatmap
11 - Candlestick chart (OHLC)
12 - Scatter chart (supports multiple data series and you can append unlimited more data series using workflows!)
13 - Polar area chart
14 - Treemap chart (supports multiple data series + possibility to append unlimited more data series via workflows!)
15 - Bubble chart (supports multiple data series + possibility to append unlimited more data series via workflows!)
16 - Box and Whisker chart
17 - Gantt/Timeline chart (supports multiple data series + possibility to append unlimited more data series via workflows!)
18 - Mixed chart - Area + Bar (supports multiple data series + possibility to append unlimited more data series via workflows!)
19 - Pyramid chart (supports multiple data series + possibility to append unlimited more data series via workflows!)
20 - 1 Dimensional Funnel chart
21 - 2 Dimensional Funnel chart
22 - Waterfall chart

I have made sure that all the charts are ultra customizable. The area chart has for example more than 100 customization options! This is great for designers because this enables you to get exactly the chart you want.

Take a look at our demo page for a showcase:
https://chartpreview.bubbleapps.io (the editor is public!)

Modern responsive dashboard build with this plugin (using the new responsive engine):
Analytics Dashboard | ApexCharts (the editor is public!)

Plugin page:

ApexCharts - Charts and Graphs Plugin for Bubble, by Thimo

You can always reach out to me for questions, bug reports or feature requests!

Updates:
1.1.0
1.2.0
1.3.0
1.4.0
1.5.0
1.6.0
1.7.0
2.0.0
2.1.0
3.0.0
3.1.0
4.0.0
4.1.0
4.2.0
4.3.0
4.4.0
4.5.0
4.6.0
4.7.0
4.8.0
4.9.0
4.10.0
5.0.0
5.1.0
5.2.0
5.3.0
5.4.0
5.5.0
5.6.0
5.7.0
6.0.0
6.2.0
6.4.0
6.7.0
6.8.0
6.9.0
6.11.0
6.12.0
6.13.0
6.14.0
6.17.0
6.18.0
6.24.0
6.25.0
6.26.0
6.31.0
6.34.0
6.36.0
6.41.0
6.44.0
6.48.0
6.50.0
6.51.0
6.53.0
6.55.0
6.56.0
6.59.0
6.60.0
6.61.0
6.64.0
6.66.0
6.67.0
6.70.0
6.77.0
6.84.0

[jacobgershkovich]

Nice work! The demo looks great.

[Jici]

Already have published two: Radial and Heatmap

APEX Heatmap Plugin for Bubble

APEX Radial Bar / Gauge Plugin for Bubble

Was working on Line chart in a different way than your But it will complete your collection with the heatmap. It’s a great library and really like it too.

Thanks for the package

[Thimo]

Your plugins look great! It is definitely an awesome library. I was also thinking of adding the heatmap, but because I already spend a lot of time creating the other charts I scheduled it to a later update. But great to hear that you like my plugin so far!

[Thimo]

Update 1.1.0 and 1.2.0:

1 - Added the option to change the crosshair background color for the bar charts.

2 - Added the option to adjust the animation speed for the initial chart animation. Also, there is an option to disable this animation. For the area chart with 2 lines there is an extra option visible that lets you adjust the delay between the 2 animations.

3 - Improved the documentation inside the bubble editor.

[jamesbond]

Wow! I’ve been looking for something like this for years. Well done man.

[Thimo]

Great to hear that you like the plugin!

[thriftstoreoutfit]

@Thimo

Thank you so much for your hard work, I’ll definitely use your plugin for my current project ! The chart and graph part of it was a real issue for me, before finding you !

[Thimo]

Big update: (1.3.0)

1 - BREAKING: Replaced the remaining color fields by native Bubble color pickers. This greatly improves UX in the editor. Keep in mind that, when you update, your color fields may be overwritten by the default value. You would likely have to choose these colors again. If the color fields do not show up, right click on the field and click ‘clear all’.

2 - Added a stroke color field for the donut and pie charts.

3 - I have provided the option to sync charts! This works between area charts, line charts and the area chart for 2 lines. Syncing charts means that when one chart is hovered, the synced chart(s) (charts with the same Syncing ID) will also be hovered at the same value. Example:

4 - You can now choose how many decimals will be formatted on the Y-axis.

Don’t forget to refresh your editor after upgrading.

If you notice any bugs, please reach out. Enjoy!

[Thimo]

Update: (1.4.0)

I have fixed the issue that sometimes charts wouldn’t draw when upgrading to 1.3.0. Thank you for reporting @kenlaji!

Don’t forget to refresh your editor after upgrading.

[Thimo]

Update (1.5.0)

1 - Data labels will now also have the same amount of decimals as on the Y-axis/tooltip.

2 - Added a field to alter the data label font size.

3 - Added the option to add a prefix and/or suffix to your Y-axis/tooltip/data label.

Don’t forget to refresh your editor after upgrading.

[kenlaji]

Thanks Thimo. Very pleased with the plugin. Numi Personal Finance dashboard is beautiful because of you

[it1]

Showing some great promise and the features are setting this plug apart from the others, well done.

Woudl love to see the option for sunburst type - https://www.fusioncharts.com/charts/sunburst-charts/simple-sunburst-chart?framework=javascript

We also have a requirement to show category of a payment then a breakdown of that category, say we support people id debt (this being a category) under dent there are many different types of debt these then act as sub categories. Such a beautiful way to to summarise the actual numbers.

[Thimo]

Looks awesome @kenlaji!

@it1 The sunburst chart is not supported by ApexCharts so far I know, but when it is available I will try to implement it into the plugin. It sure is a great way to visualize data!

[rivergalli]

@Thimo First off this charting plugin is amazing. Stunning visuals and very configurable.

I am attempting to update my series data filter based on a dropdown. But I am unable to get the chart to update. I have attempted to use a Custom State and to update the group value the chart is using to filter but neither seems to work. I might be missing something as I am relatively inexperienced with Bubble in general.

Any help would be greatly appreciated.

[Thimo]

Great you at enjoying the plugin! At the moment the chart is rendered only one time, so updating the data after the chart is rendered doesn’t result in a re-rendered chart. But I will definitely try to add actions to the plugin that lets you update the data in the future!

[Thimo]

Never mind @rivergalli, I just pushed an update that lets you use the condition tab to dynamically change all (!) the properties of the charts! Just update to 1.6.0 and don’t forget the refresh your browser after upgrading.

[Thimo]

Update 1.6.0

1 - You can now change all the charts properties dynamically in the condition editor! See preview page for a demo.

2 - Donut and Pie charts will now have % symbol as suffix on their data labels.

Don’t forget to refresh your editor after upgrading.

[rivergalli]

@Thimo OMG, Thank you! I will test this out today.

[rivergalli]

@Thimo This works great now. One minor issue, unless there is a bug on my side. When repainting the chart, such as browser window resize, it seems the filter criteria reverts to a previous version. I am still trying to verify whether it is something I am doing, but at first glance it seems like it may be an issue.