Vue chart reactive example

[enlazoCtrl]

I'm trying to make a vue chart with vue-chartjs in vue 3 and composition API, the issue comes when I try to make a chart like this one

On this chart I need to put several labels with it's value of consumption on the same bar to difference the consumption of cpu at the same time. I look for internet I did not found any similar example

I need to pivot the data from a API call to put 0's when a user is not using cpu in a specific time that's why I use quick-pivot to ready the dataSet that I use on the :data="cpuReactive" as an argument. I share the approach:

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import Pivot from 'quick-pivot'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  type ChartData
} from 'chart.js'
import { Bar } from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

const cpu = {
  labels: [''],
  datasets: [
    {
      label: 'Consumo',
      backgroundColor: '#f87979',
      barThickness: 40,
      borderRadius: 5,
      data: [{}]
    }
  ]
}

const cpuReactive = ref<ChartData<'bar'>>({
  datasets: []
})

let pivot: any
const initalDataSet: string[][] = [['cuando', 'quien', 'cuanto']]

const urlGraficas: string =
  import.meta.env.VITE_APP_ROOT_API + import.meta.env.VITE_BACKEND_DASHBOARD_DESA + '/graficas'

async function pedirGraficas() {
  const { data } = await axios.get<any>(urlGraficas + 'Cpu')

  readyChartDataSet(data)
}

function readyChartDataSet(data: any) {
  data.forEach((element: { cuando: string; usu: string; cpu: number }) => {
    const object: any[] = [element.cuando, element.usu, element.cpu]

    initalDataSet.push(object)
  })

  pivot = new Pivot(initalDataSet, ['quien'], ['cuando'], 'cuanto', 'sum')

  cpu.labels = [...pivot.data.table[0].value]
  cpu.labels.shift()
  cpu.labels.pop()
 {label:string, data: any[]}
  let datasetChart = [...pivot.data.table]
  let finalDataSetChart: { label: string; data: any[] }[] = []
  datasetChart.shift()
  datasetChart.pop()

  datasetChart.forEach((element) => {
    for (let index = 0; index < element.value.length; index++) {
      if (element.value[index] == '') {
        element.value[index] = 0
      }
    }

    const item = {
      label: element.value[0],
      data: element.value
    }

    item.data.shift()
    item.data.pop()
    cpu.datasets[0].data.push(item)
  })
  console.log(cpu.datasets[0].data)
  cpu.datasets[0].data.shift()

}

const options = {
  responsive: true,
  maintainAspectRatio: true
}

onMounted(async () => {
  await pedirGraficas()
  cpuReactive.value = cpu as any
})
</script>

If I put the cpu object to reactive mode a execution of mounted hook occurs so that's why i leave it static, any idea on how can I achieve this?

[apertureless]

I dont know quick-pivot.
However, you can manually update the chart if you access the chart.js instance https://vue-chartjs.org/guide/#access-to-chart-instance

And then call .update() on it. https://www.chartjs.org/docs/latest/developers/updates.html