Vue ChartJS Line Chart not displaying

Fouroh3 0
Viewed 96

I am using chartjs with the vue-chartjs wrapper and trying to create a Line Chart using data fetched from my api. The data prints to the console as expected and I do not get a error in the console. The resulting Line Chart does not display at all in the browser. There is, however a large amount of white space where the canvas tag is injected. I can create a doughnut chart fine, just not this line chart. Your help is greatly appreciated! I am using code from the Chart examples found at https://vue-chartjs.org/examples/ for the LineChart component

IndexView.vue 

<script setup>
import axios from 'axios'
import { onMounted, reactive } from 'vue'
import LineChart from '@/components/LineChart.vue'


const data = reactive({
  user: null,
  totals: null,
  checkins: null
})
const state = reactive({
  loading: true
})
const charts = reactive({
  doughnutConfig: null,
  lineConfig: null
})
onMounted(async () => {
  // load data from store and api
  data.user = await userStore.fetchUser()
  const user_resp = await axios.get(...)
  data.totals = user_resp.data.totals
  data.checkins = user_resp.data.check_ins
  state.loading = false

  // create line chart
  var dates = []
  var ratings = []
  var length = data.checkins.length < 10 ? data.checkins.length : 10
  for (var i = 0; i < length; i++) {
    dates.push(data.checkins[i].date)
    ratings.push(data.checkins[i].rating)
  }

  console.log(dates) // [ "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-04T00:00:00", "2022-09-05T00:00:00" ]
  console.log(ratings) // [ 5, 5, 3, 2, 4 ]

  charts.lineConfig = {
    data: {
      labels: dates,
      datasets: {
        label: 'Ratings by date',
        data: ratings,
        backgroundColor: '#f87979'
      }
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      }
    }
  }
})
</script>
<template>
  <LineChart
    v-if="charts.lineConfig"
    :chart-options="charts.lineConfig.options"
    :chart-data="charts.lineConfig.data"
    :width="400"
    :height="300"
  />
</template>

LineChart.vue

<script setup>
import { defineProps } from 'vue'
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale
} from 'chart.js'

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

const props = defineProps({
  chartData: {
    type: Object,
    required: true
  },
  chartOptions: {
    type: Object,
    required: true
  },
  chartId: {
    type: String,
    default: 'line-chart'
  },
  width: {
    type: Number,
    required: true
  },
  height: {
    type: Number,
    required: true
  }
})
</script>

<template>
  <Line
    :chart-id="props.chartId"
    :chart-data="props.chartData"
    :chart-options="props.chartOptions"
    :width="props.width"
    :height="props.height"
  />
</template>

vue-chartjs chart.js vue.js javascript
1 Answers

Usually when a chart is not shown, there is an issue on the data configuration.

In your data config, the datasets option seems to be defined as an object but instead should be an array.

 data: {
      labels: dates,
      datasets: { // <--- should be an array.
        label: 'Ratings by date',
        data: ratings,
        backgroundColor: '#f87979'
      }
    },

It should be:

 data: {
      labels: dates,
      datasets: [{
        label: 'Ratings by date',
        data: ratings,
        backgroundColor: '#f87979'
      }]
    },
user20579250
Related