🚀[new plugin] apexcharts + config-builder

Hello fellow Bubblers!
We are glad to announce our small addition to the plugin collection:


ApexCharts + CONFIG BUILDER

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

  • Choose from a wide range of charts.
  • ApexCharts are flexible and responsive - making your charts work on desktops, tablets as well as mobiles.
  • Setting up ApexCharts is easy. Config Builder helps you create chart configurations quickly and easily. Our documentation will help you set up charts quickly. Config Builder allows you to adjust more than 400 different parameters.
  • Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards.

HOW IS OUR PLUGIN DIFFERENT FROM OTHER CHARTS PLUGINS?
The creation and configuration of the chart is done using CONFIG BUILDER.
CONFIG BUILDER is a visual assistant in building and configuring your charts. In CONFIG BUILDER you create the desired chart configuration for you. Adding and changing parameters you will immediately see the result.
In just a few minutes you can create the chart configuration you need, get the code that will be used in our plugin in your application.
You can also use CONFIG BUILDER to modify previously created configurations. If you need to change some parameters in a previously created configuration, then you do not have to create everything from the beginning. You just need to paste the old code into the CONFIG BUILDER, make the changes you want, and get the new (changed) configuration code.
Config Builder allows you to adjust more than 400 different parameters.

The charts are divided into five types:
ApexChart_Type_01

  • area
  • bar
  • line
  • histogram
  • radar
  • scatter

ApexChart_Type_02:

  • pie
  • donut
  • radialBar
  • polarArea

ApexChart_Type_03:

  • bubble

ApexChart_Type_04:

  • heatmap
  • treemap

ApexChart_Type_05:

  • candlestick
  • boxPlot
    –

01
.
.
02
.
.
03
.
.
chart_01

.
APEX CONFIG BUILDER

APEX DOC

DEMO

Plugin page:

If you have questions, reach out to us at contact@mindforapps.com
We appreciate your reviews and suggestions.

Cheers
Jay | Mindforapps

9 Likes

Very cool!

1 Like

Thanks! I am very glad that you appreciated our work.

2 Likes

version 1.1.0.
Added element ApexChart_Type_02 including four new types of charts:

  • pie
  • donut
  • polarArea
  • radialBar

chart_02

Demonstration:

Config Builder:

1 Like

Update. Version 1.2.1

Added element ApexChart_Type_03 including a new type of charts:

  • bubble.

chart_03

Config Builder:

Demonstration:

1 Like

Update. Version 1.3.0

Added ApexChart_Type_04 element, including two new chart types:

  • heatmap
  • treemap
    .

chart_04

Config Builder:

Demonstration:

1 Like

Hello everyone!

Apex Config Builder has a new section - forecastDataPoints.
Allows to highlight some end points with opacity or dotted line (for area, line, bar, histogram). What can be used as a forecast.

In bar and histogram, you can highlight endpoints with opacity. And in area and line, you can also select a dotted line.

Config Builder:

1 Like

Hey!

Additions to Apex Config Builder.

In the section “Tooltip” - “theme” added the item “custom”.

this allows you to customize tooltip themes individually.

Config Builder:

Demonstration:

Good luck to all.

2 Likes

Update. Version 1.4.0

Added ApexChart_Type_05 element, including two new chart types:

  • candlestick
  • boxPlot

chart_05

Config Builder:

Demonstration:

1 Like

Hey!

Thanks for the awesome plugin.

I have a request for an additional feature.
The apexcharts library supports synchronization of multiple charts. They have an example of synchronization of “line” and “area” charts on their website.
I have not found a mention of this feature in your plugin.
.

.
Are you planning to add the ability to sync charts to your plugin?

Thank you.

1 Like

Hey!

This feature is not only planned, but already in development. In fact, we have almost finished working on this feature and are now finishing testing. Along with other improvements, the synchronization of charts will be added in the next update (I think Monday or Tuesday)

Good luck.

Update v 1.5.0

Added the ability to sync charts. At the moment this function is available in five types of charts from the “ApexChart_Type_01” element (“line”, “area”, “scatter”, “bar” and “histogram”)

When you have multiple charts with a common x-axis and significant difference in y values, it’s a prevalent way to visualize it through synched charts.

chart_id should be a unique identifier.
group ID should be same for the charts which needs to be synced.
yaxis.labels.minWidth should also be same for all the charts. Different width yaxis in different charts will produce incorrect results when hovering or interacting.

Image 23

Demo and examples can be found here:

Here you can go to the editor and see in more detail how everything is connected.

Comment:
We have experimented with trying to synchronize charts of different types:

  • Synchronization is great for “line”, “area” and “scatter” charts. These three types sync well with each other. Synchronization will be correct even if the elements have different widths. In addition, in our opinion, these three graphs are the most informative when using synchronization.
  • Graphs of types “bar” and “histogram” are correctly synchronized only if the elements have the same width.
  • Synchronization is not provided for charts of the “radar” type (charts of this type do not have an x-axis)

sync_0-min

In CONFIG BUILDER, the module “Tooltip” - “theme” - “custom” has been modified and improved

Config Builder:

Good luck to all.

Great job!
This is exactly what I asked for.
Just checked it and everything works great.

Many thanks.

Hi @MindForApps I’m setting up the Heatmap chart via “alternative method” and The Series 4 label is not showing properly,

image

Hopefully this can be fixed quickly.

Hello!

Yes, sorry, it was a mistake (an elementary typo) on our part.
Everything is already fixed.
Please update plugin version 1.5.2

Thank you.

Thank you!!!

I have a question, is there a way to have a dynamic number of rows?

Do you mean change input data dynamically?

When the input data or parameters change, these data and parameters are applied and the gafic is reloaded.
For example you can add (change) data using “workflow” → “Set states” and “conditional”

Here I made a simple demo:

Thanks for the explanation, but what I see is that the plugin is limited to 10 series, and can’t add more than that dynamically right?

Yes, at the moment it is.