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.

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.

Thanks, Scott. Your solution worked perfectly out of the box. I did remove carousel animation as well, and it looks great. I learned several new things, including how to post a full Quasar SPA app via Code Sandbox; thanks again.

I’m using amCharts4 with Quasar. As per the amCharts4 documentation on integrating with Vue, I am using this.$refs in the mounted method, like this:

mounted() {
    let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);

I had put my chart in a Vue Single-File Component (in this example, called stockChart.vue). This has been working fine for me, but now I’d like the chart to be displayed on a q-carousel-slide. The same chart doesn’t display within the q-carousel-slide, which is stumping me. In other words, this displays the chart as expected:

<template>
  <q-page class="flex flex-center">
    <stockChart />
  </q-page>
</template>

But this doesn’t display the chart:

<template>
 <q-page class="flex flex-center">
   <q-carousel>
     <q-carousel-slide>
       <stockChart />
     </q-carousel-slide>
   </q-carousel>
 </q-page>
</template>

Based on some research, I think this might be because the q-carousel may be using v-if, so the ref isn’t created in the Dom until the slide is shown, but I thought implementing the chart creation code in mounted() [as per the amCharts documentation] would have worked but it doesn’t.

I’m not the most experienced Vue/node.js programmer, so I’m a bit stumped right now. Can someone give me some ideas of where to look or how to debug this?