Forum Academy Marketplace Showcase Pricing Features

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

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

1 Like

Great to hear that you like the plugin!

2 Likes

@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 !

1 Like

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:

Syncing charts

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!

3 Likes

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.

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.

1 Like

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

7 Likes

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.

1 Like

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!

@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.

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!

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.

Update 1.6.0

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

ezgif-2-29428378a8a0

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

Don’t forget to refresh your editor after upgrading.

4 Likes

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

@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.

Update 1.7.0

1 - Charts with empty/null values (in Y-axis data) will not cause errors anymore (on hover).

Don’t forget to refresh your editor after upgrading.

3 Likes

Hi @Thimo,
I am trying to create sales over time chart. I have orders table with total invoice amount (number) and their creation date (date). I tried to feed the chart with these two data sets but it doesn’t work.

To my understanding, I need to convert date data type to text, feed the chart with list of texts. In the demo editor, I see that almost all of the charts gets their time data set through “Year” field which is a text field.

Is there a way to feed charts with a regular date field or do I need to have a field in my tables that is type of text but represent the date value of the transaction?

This is great, makes me want to make an app with graphs, just to play with it :slight_smile:

1 Like

Yes the X-axis expects a list of texts, but it is really easy to convert your list of dates to a list of texts. You can use the ‘:formatted as’ operator in Bubble to convert any data type to a text. So, you expression could look like this: ‘Do a search for data’s date:formatted as 4/15/2020’. :slight_smile:

Thank you @Thimo, this worked well. However, I couldn’t manage to show total sum per each day. For example, I have three transaction on 3/4/2020 and they all show as separate data points in the chart. Any idea how I could show the total sum for each day?