Make beautiful graphs and supplements with the Apex Chart

Tram Ho

Preface

  • Starting from the need to perform the statistical chart function for your admin page, I also have to learn about the libraries that support charting, including some typical names such as Chartjs or Chartist .
  • But then I was enlightened by an older brother to a “new” library (to me) and the first impression was that it was quite colorful, eye-catching, and another plus point was that there was built-in for three The current popular javascript library / framework is Angular / React / Vue . That is the Apex Chart .
  • So I decided to try the library experience and share with you in this article. Let’s get started!

Content

Learn about the Apex chart

  • My first impression of Apex is on aesthetics, compared to the two names I mentioned above are Chartjs and Chartist, you can clearly see that Apex is more beautiful. And depending on your project, Vue / Angular / React / JS , Apex also has demo and sample code for you to refer.

  • The next thing people often care about when using a library is the number of users and stars on github. However, due to the different release times, these numbers do not say too much. Instead we will be interested in whether it is “alive” or not, ie is it still being developed or not? Let’s take a look at the repository information of all 3 libraries on github (as of 05/05/2020) for comparison.
    • Apex :

    • Chartjs :

    • Chartist : chartist-js’ last commit is from November 2019, which means it has not been developed for more than half a year. For unknown reasons, the repo owner still comments on issues but does not merge pull requests and resolve them. But anyway, if it’s me, I will not choose to use this library.

Some typical functions

  • Above are 2 reasons that I choose Apex, now we will embark on the installation to be able to use Apex offline:
    • Method 1 (recommend): install through npm (Node package manager) with the command

      And when using, just import as follows:
    • Method 2: It is embedded directly with <script> tag in html. Many people will find this method simple, easy to eat, and easy to win, but I do not recommend using this method, as it will make the loading speed of the equipment slower.
  • Next, let’s learn about some of the main components that make up a complete chart:

    1. Series:

    • The minimum thing to create a chart is data. And a data set used for charts is called a series. And we have some types like single data series/multiple data series/...

    1.1. Single values:

    • This is a simple type of data format, often used with column chart types to compare data between categories. For example, with single values, the series will usually be trục y in the chart and categories will be the x-axis:

    1.2. Paired values:

    • The data will be declared as pairs of values {x, y} in the series and you will need to declare additional data types of the x axis, for example as follows:

    1.3. Timeline series:

    • In some charts, you will need to track data that changes over time (for example, a reputation display chart on a personal viblo page ), so it’s important to deal with timestamps or date data.
    • To make sure that the DateTime string data you are passing is correct, try passing the Date.parse () function, if true return is correct.

    1.4. Data for Pie / Donuts / RadialBars:

    • For some special types of charts such as pie charts, pie charts (Donut), concentric pie charts (RadialBars), the data transmitted is also different from the pie chart {x, y}.
    • Then, instead of passing on xaxis , we will have to pass it into labels

    2. Localization

    • Multilingual is a very essential function for a website, as now visitors to a website can use many different languages. Understanding that, Apex provides the Localization function to be able to customize the date format or paragraphs for each language and region.
    • To use this function, we have 2 options:
      • Embed the corresponding json file in your desired language / country.
        • If you installed Apex through npm, you can find this json file inside the /dist/locales .
        • If you want to use cdn, you can go to https://cdn.jsdelivr.net/npm/apexcharts/dist/locales/ to find the language you need:
      • If you do not want to embed an existing json file, you can create your own locale file (currently not Vietnamese, so you want to learn can try this way) according to the following sample template:

    3. Interactivity (interact with the chart)

    • This is a function that I find is quite good, enabling users to interact more with the chart instead of just looking at a static chart. As you can see here, you can enlarge, shrink the chart or download the chart in SVG format.

    • To be able to customize these functions, you can change the toolbar’s configuration as follows:

    4. Themes

summary

  • This article I would like to introduce a few floating features that make me choose Apex, hope that this article can convince you and provide you with an option when you need to perform the function of graphing statistics. If you find something interesting, don’t hesitate and share it for yourself and others.
  • Thank you for taking the time to read your article ????

References

Share the news now

Source : Viblo