vue-chartjs line-chart with API-call not rendering

Question

I made some bar charts with vue2 and vue-chart.js and they work great. The data comes from an API call. I have now problems with line charts, it is not displayed, without any errors. The data are loaded, the line-chart is not showing. I can't find the error in my code. Any ideas? THX.

Versions:

"vue": "^2.6.11"
"vue-chartjs": "^4.1.1"

my base-vue:

<template>
        
          <div id="app" class="content">
        
            <div class="dist_30"></div>
            <h3>Charts</h3>
        
            <div class="dist_10"></div>
        
            <div class="row ">
        
              <div class="col-12">
        
                <div style="margin: 10px 10px 10px 10px;">
                  <BarChart />
                </div>
        
              </div>
        
            </div>
        
            <div class="row ">
        
              <div class="col-12">
        
                <div style="margin: 10px 10px 10px 10px;">
                  <LineChart />
                </div>
        
              </div>
        
            </div>
        
          </div>
        
        </template>
        
        <script>
        import BarChart from '@/components/BarChart'
        import LineChart from '@/components/LineChart'
        
        export default {
          name: 'App',
          components: { BarChart , LineChart}
        }
        </script>

my LineChart.vue:

<template>
          <Line v-if="loaded"
            :chart-options="chartOptions"
            :chart-data="chartData"
            :chart-id="chartId"
            :dataset-id-key="datasetIdKey"
            :plugins="plugins"
            :css-classes="cssClasses"
            :styles="myStyles"
            :width="300"
            :height="height"
          />
        </template>
        
        <script>
        import { Line } from 'vue-chartjs/legacy'
        import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LineElement, CategoryScale, LinearScale } from 'chart.js';
        
        ChartJS.register(Title, Tooltip, Legend, BarElement,  LineElement, CategoryScale, LinearScale);
        
        const chartAPI = 'https://m.myapp2go.de/services/getstatistik_tables.php';
        
        export default {
          
          name: 'LineChart',
          components: { Line },
        
            async mounted () {
            this.loaded = false
        
            try {
        
              const response = await fetch(chartAPI);
              const chartArray = await response.json();
              this.chartdata = chartArray.items;
        
                // Get all the numbers/labels from the response
                  this.chartData.labels = this.chartdata.map(i => i.table).slice(1); 
                  this.chartData.datasets[0].data = this.chartdata.map(i => i.count).slice(1); 
        
                  console.log("chart Data ", JSON.stringify(this.chartdata));
                  console.log("chart Data numbers: ", this.newChartArray);
        
                  this.loaded = true
        
            } catch (e) {
              console.error(e)
            }
          },
            computed: {
            myStyles () {
              return {
                position: 'relative'
              }
            }
          },
          props: {
            chartId: {
              type: String,
              default: 'line-chart'
            },
            datasetIdKey: {
              type: String,
              default: 'label'
            },
            width: {
              type: Number,
              default: 200
            },
            height: {
              type: Number,
              default: 0
            },
            cssClasses: {
              default: '',
              type: String
            },
            styles: {
              type: Object,
              default: () => {}
            },
            plugins: {
              type: Array,
              default: () => []
            }
          },
          data() {
            return {
              chartData: {
                labels: [ 'num', 'call', 'blog', 'key', 'mod,' ,'pic', 'acc', 'ifc', 'req', 'inf' ],
                datasets: [ { 
                  label: 'Database statistics',
                  borderWidth: 1,
                  
                  data: [ ]} ]
              },
              chartOptions: {
                responsive: true,
                maintainAspectRatio: false
              },
              newChartArray: [],
              loaded: false
            }
          }
        }
        </script>

output from chrome-dev-tools:

<Line chart-options="[object Object]" chart-data="[object Object]" chart-id="line-chart" dataset-id-key="label" plugins="" css-classes="" styles="[object Object]" width="300" height="0"></Line>

LocDog · Accepted Answer · 2022-08-26 14:04:08Z

1

Because Bar chart and Line chart use different components you must import these following components like this :

import { Line as LineChartGenerator } from 'vue-chartjs/legacy'

import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    CategoryScale,
    PointElement
} from 'chart.js'

ChartJS.register(
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    CategoryScale,
    PointElement
)

and for the template :

<LineChartGenerator v-if="loaded"
            :chart-options="chartOptions"
            :chart-data="chartData"
            :chart-id="chartId"
            :dataset-id-key="datasetIdKey"
            :plugins="plugins"
            :css-classes="cssClasses"
            :styles="myStyles"
            :width="300"
            :height="height"
          />

answered Aug 26, 2022 at 14:04

LocDog

364 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ralf Bordé Over a year ago

THX very much, it works fine now! I couldn't find any docs for it. Where can i find docs for radar-chart e.g ?

LocDog Over a year ago

vue-chartjs.org/examples Here you can find some examples

Collectives™ on Stack Overflow

vue-chartjs line-chart with API-call not rendering

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related