Bridging the gap between low-level and high-level JavaScript Chart libraries.
Presenting data in an effective way is becoming more and more important in the data-driven world. For web developers, the choice of selecting the right data-visualization library is vast and the list of chart libraries is getting bigger every day. You might ask now — why again?
ApexCharts — Open-Source JavaScript Chart library
ApexCharts is a free and open-source modern charting library released under MIT license that helps developers to create interactive visualizations for web pages. It is developed to bridge the gap between the existing low-level and high-level chart libraries.
But, Why the need for another chart library?
Granted, there are dozens of chart libraries including the commercial ones which have evolved heavily in the last decade. Many of them are simply amazing, but costly to use for a simple dashboard. Many of them are just bloated trying to do everything but fails to do one thing perfectly. ApexCharts attempts to pick good things from these libraries and provide one with a simple API. It doesn’t try to be a “one size fits all” solution, but rather a proposal to create modern charts for web dashboards.
So, what problem does ApexCharts solves?
We will compare ApexCharts with existing open-source high-level, declarative chart solutions and not a low-level chart library (eg., d3.js).
1. Easier zooming, panning & scrolling
Many open-source chart libraries don’t support this highly interactive feature out of the box. Some do provide this as add-on but I haven’t seen a smoother experience in them. ApexCharts places good amount of importance to the zooming/scrolling and allows multiple options to traverse the data in the chart.
2. Placing annotations
Informative labels along with lines placed over specific values on y-axis and/or x-axis can be incredibly helpful to interpret charts easily. ApexCharts has finite control over the placements of the annotations including font-size/color/border of the labels and line.
3. Triggering events on user’s actions to provide additional data in callbacks
The true meaning of interactivity is — combining multiple charts and passing information one to other. This is achieved by triggering events on several actions and returning the new data in the callback functions — the new data then can be used to modify the data of other charts. This way we have unlimited possibilities to create charts based on other charts.
4. Truly Responsive
Responsiveness in charts isn’t just resizing the whole chart and make it equal to screen size, but allow to provide multiple configs for different screen sizes. ApexCharts has an intuitive way to override default config with another config based on viewport width.
5. A way to customize nearly every element
Don’t just limit your charts with plain colors in the primary elements. Give colors, gradients, shadows, patterns, images to your chart components and customize to fit your design needs. You can even customize the SVG element through css as each element is given a unique class name.
The above visualization has 2 different area charts synchronized and are customized to Github style — a small example of unlimited possibilities.
6. Sparklines
Utilize sparkLines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature most extreme and least values.
7. Heatmaps
Use Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and area of focus.
8. Cool Gauges that enhances Dashboards
Often ignored, these tiny gauges are an important part of a dashboard and are useful in displaying single series data in small place.
Any Dependency?
ApexCharts has a single dependency on SVG.js, a battle-tested library. Without re-inventing the wheel in this area, we leverage the full power of SVG.js.
ApexCharts on Github
More where this came from
This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
