No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Charts

    Help
    chartjs
    5
    14
    11865
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      amoss last edited by

      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

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        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

        A 1 Reply Last reply Reply Quote 0
        • A
          amoss @s.molinari last edited by

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

          1 Reply Last reply Reply Quote 0
          • R
            rsrogers4 last edited by

            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.

            1 Reply Last reply Reply Quote 1
            • A
              amoss last edited by

              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!

              1 Reply Last reply Reply Quote 0
              • patryckx
                patryckx last edited by

                @amoss Some infinite possibilities already prepared for Vue:

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

                A 1 Reply Last reply Reply Quote 0
                • A
                  amoss @patryckx last edited by

                  @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 2 Replies Last reply Reply Quote 0
                  • patryckx
                    patryckx @amoss last edited by

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

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

                    1 Reply Last reply Reply Quote 0
                    • patryckx
                      patryckx @amoss last edited by

                      @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

                      L 1 Reply Last reply Reply Quote 0
                      • A
                        amoss last edited by

                        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 1 Reply Last reply Reply Quote 0
                        • patryckx
                          patryckx @amoss last edited by

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

                          1 Reply Last reply Reply Quote 0
                          • A
                            amoss last edited by

                            Thank you all very much

                            1 Reply Last reply Reply Quote 0
                            • L
                              lobo @patryckx last edited by

                              @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 1 Reply Last reply Reply Quote 1
                              • patryckx
                                patryckx @lobo last edited by

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

                                1 Reply Last reply Reply Quote 0
                                • First post
                                  Last post