Charts

[amoss]

Hi

I’m a newbie to quasar and vue in general and want to add a chart to my project.

I read here in the forum about vue-charts,js but I also saw google charts which looks nice.
Is there a recommended charts library for vue/quasar? As I’m still in testing, a free library is preferable.

Lastly, how can such library can be added to a quasar project? including docs about all the options and variables that can be used? I read here https://developers.google.com/chart/interactive/docs/basic_load_libs about google charts, not it’s not vue related.

Thanks

[s.molinari]

Hi Amoss,

Apex Charts is a name that often comes up. https://apexcharts.com/

How it’s added depends on the library. Apex Charts has a Vue integration. https://apexcharts.com/docs/vue-charts/

I also just worked with amCharts here: https://forum.quasar-framework.org/topic/4556/amcharts-and-refs

It’s free with a small attribution (image linked to their site).

Scott

[amoss]

@s-molinari

Thanks scott, what I liked about Google charts were the hover effect.

I will take a look at apex but if there’s a good doc regarding Google charts, or another library with hover effect, I’d appreciate knowing about it

[rsrogers4]

You can also check out Highcharts https://www.highcharts.com/), chartjs (https://www.chartjs.org/), Fusion Charts (https://www.fusioncharts.com/), and Chartist (https://gionkunz.github.io/chartist-js/). They all have strengths and weaknesses. Personally, after doing some preliminary research, I would pick Chartist, Apex or amCharts depending on my needs (those are in order of least to most chart types). I couldn’t use Google because your data can’t be private, but that might not be an issue for you.

[amoss]

Thanks for the tip regarding Google charts, I didn’t know that, so this one’s down.

chartjs looks nice as well, I’ll try that and apex. The others (except chartist) require a license and for now I prefer playing with a free library.
Thanks a lot!

[patryckx]

@amoss Some infinite possibilities already prepared for Vue:

https://github.com/vuejs/awesome-vue#charts

[amoss]

@patryckx Thanks, for a newbie (me), seeing a list like that confuses me
For example,
there’s this: https://www.chartjs.org/docs/latest/getting-started/installation.html
there’s that: https://github.com/apertureless/vue-chartjs

Which is better? which one should I use?

[patryckx]

@amoss What do you think of these examples?
https://github.com/patrickmonteiro/quasar-apexcharts

DEMO: https://quasar-apexcharts.surge.sh

[patryckx]

@amoss

Here is the default library: https://www.chartjs.org/docs/latest/getting-started/installation.html

This is the library for Vue.js, so I would certainly use the second one for ease: https://github.com/apertureless/vue-chartjs

[amoss]

The examples look great, no doubt about it.

btw, there’s also this: https://github.com/hchstera/vue-charts , if I understand correctly, also chartjs for vue, so how can I know which is better?
Sorry for the newbie questions, I admit that too many options, sometimes scares me

[patryckx]

@amoss To be honest, the best one will be the one that meets your need simply. But what you can evaluate is the size of code each will “weigh” in your application.
Apexchart pleases me the most for the amount of customization features it brings me. But that is a personal opinion.

[amoss]

Thank you all very much

[lobo]

@patryckx https://github.com/apertureless/vue-chartjs to much thnx patryckx so crack you make this so easy and better than page official really you save my life with that beatiful examples i hope you still up examples like that again to much thnx patryckx from méxico.

[patryckx]

@lobo I’m glad I’m helping you! This is my goal making examples for the quasar community