Chart object referencing vue-chartjs v4

2022-05-06 14:38 mahmoud ghalayini imported from Stackoverflow

vue-chartjs: "^4.0.7"

chartjs: "^3.7.1"

In v3 for vue-chartjs referencing chart component and using this.$refs.myChart._data._chart returns the chart object but after upgrading to v4 the reference no longer works as it's used to.

Any work around to achieve the same in v4?

See also questions close to this topic

How can I get toast-ui editor content?

I am a student studying. I think I'm doing it conceptually wrong.

I'm trying to use vue3 and type script And I'm going to use toast-ui editor.

I get some errors.

refEditor.value.invoke is not a function

How can I get toast-ui editor content?

this is my code

<template>
  <div class="markup-tables flex">
    <va-card :title="$t('tables.stripedHoverable')">
      <va-card-content>
        <div id="refEditor" ref="refEditor"></div>
        <br />
        <div class="row justify--end paginationButtons-left">
          <va-button class="mr-2 mb-2">List</va-button>
        </div>
        <div class="row justify--end paginationButtons-right">
          <va-button class="mr-2 mb-2" @click="getHTML">Save</va-button>
        </div>
      </va-card-content>
    </va-card>
  </div>
</template>

<script lang="ts">
import '@toast-ui/editor/dist/toastui-editor.css'

import Editor from '@toast-ui/editor'
import { defineComponent, onMounted, ref } from 'vue'

import data from '@/data/tables/markup-table/data.json'

export default defineComponent({
  name: 'BoardWrite',
  setup() {
    const refEditor = ref(null)

    const getHTML = () => {
      console.log('getHTML test')
      let html = refEditor.value.invoke('getHtml')
      console.log(html)
      // ERROR 
    }

    onMounted(() => {
      const editor = new Editor({
        el: refEditor.value,
        height: '700px',
        initialEditType: 'markdown',
        previewStyle: 'vertical',
      })
      editor.getMarkdown()
    })

    return {
      getHTML,
      refEditor,
    }
  },
})
</script>

Deploy VueJS + API app to Azure Static Web App with Gitlab doesn't create functions

I've started creating a small application that will use VueJS as a frontend with Azure Functions as the backend. I was looking at using Azure Static Web Apps to host both components for the application and Gitlab to store / deploy the app.

Everything but the creation of the Azure functions works. Following https://docs.microsoft.com/en-us/azure/static-web-apps/gitlab?tabs=vue

The output from the deploy step, listed below is:

App Directory Location: '/builds/*/valhalla/valhalla-client/dist/spa' was found.
Api Directory Location: '/builds/*/valhalla/valhalla-api/dist' was found.
Looking for event info
Could not get event info. Proceeding
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---
Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues
Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
Build Operation ID: |qAffRWArEg8=.deee9498_
Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.
---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
Finished building app with Oryx
Starting to build function app with Oryx
---Oryx build logs---
Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues
Oryx Version: 0.2.20220131.3, Commit: ec344c058843461525ff03b46031553b6e15a47a, ReleaseTagName: 20220131.3
Build Operation ID: |NGXLP5bVBRk=.705477f6_
Repository Commit : 7cdd5b61f956e6cb8459b13a42af363c4440a97b
Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.
---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
[WARNING] The function language could not be detected. The language will be defaulted to node.
Function Runtime Information. OS: linux, Functions Runtime: ~3, node version: 12
Finished building function app with Oryx
Zipping Api Artifacts
Done Zipping Api Artifacts
Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.1762737(s)
Status: InProgress. Time: 15.3950401(s)
Status: Succeeded. Time: 30.5043965(s)
Deployment Complete :)
Visit your site at: https://polite-pebble-0dc00000f.1.azurestaticapps.net
Thanks for using Azure Static Web Apps!
Exiting
Cleaning up project directory and file based variables 00:00
Job succeeded

The deploy step appears to have succeeded, and the frontend is deployed, but there are no Azure Functions showing up in this Static Web App. Is something missed here? So far, the Azure Functions I have are the boiler-plate from instantiating a new Azure Function folder.

image: node:latest

variables:
  API_TOKEN: $DEPLOYMENT_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/valhalla-client/dist/spa'
  API_PATH: '$CI_PROJECT_DIR/valhalla-api/dist'

stages:
  - install_api
  - build_api
  - install_client
  - build_client
  - deploy

install_api:
  stage: install_api
  script:
    - cd valhalla-api
    - npm ci
  artifacts:
    paths:
      - valhalla-api/node_modules/
  cache:
    key: node
    paths:
      - valhalla-api/node_modules/
  only:
    - master
    
install_client:
  stage: install_client
  script:
    - cd valhalla-client
    - npm ci
  artifacts:
    paths:
      - valhalla-client/node_modules/
  cache:
    key: node
    paths:
      - valhalla-client/node_modules/
  only:
    - master

build_api:
  stage: build_api
  dependencies:
    - install_api
  script:
    - cd valhalla-api
    - npm install -g azure-functions-core-tools@3 --unsafe-perm true
    - npm run build
  artifacts:
    paths:
      - valhalla-api/dist
  cache:
    key: build_api
    paths:
      - valhalla-api/dist
  only:
    - master
  needs:
    - job: install_api
      artifacts: true
      optional: true

build_client:
  stage: build_client
  dependencies:
    - install_client
  script:
    - cd valhalla-client
    - npm i -g @quasar/cli
    - quasar build
  artifacts:
    paths:
      - valhalla-client/dist/spa
  cache:
    key: build_client
    paths:
      - valhalla-client/dist/spa
  only:
    - master
  needs:
    - job: install_client
      artifacts: true
      optional: true

deploy:
  stage: deploy
  dependencies:
    - build_api
    - build_client
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."
  only:
    - master

How to global import a stylus file in vite

Now I'm try use vite to create a vue app. But have trouble to global import a stylus file in vite.config.js.

I try the code from vite docs.

export default defineConfig({
  css: {
    preprocessorOptions: {
      styl: {
        additionalData: `@import "./src/assets/styles/common.styl"`
      }
    }
  }
})

But it's completely not work.

I got a solution to set global style from github.

export default defineConfig({
  css: {
    preprocessorOptions: {
      stylus: {
        globals: {
          '$highlight-color': 'red'
        }
      }
    }
  }
})

It's works fine, But how to import a styl file globaly? I tried to add 'additionalData' to the workable config. However I got bunch of errors: 'failed to locate file'. It seems like try to import the file in every .vue file, but has trouble to locate the file.

  css: {
    preprocessorOptions: {
      stylus: {
        additionalData: `@import "./src/assets/styles/common.styl";`,
        globals: {
          '$color-g1': '#F3F4FC',
          '$color-white': '#FFFFFF',
        }
      }
    }
  }

Have any idea about this?

How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?

I have distributed the data across the pie to equal 100% in total ( I think lol ) please verify that's correct if you don't mind. But I want to be able to re-distribute the data when I turn off/on the legend items.

Here's a sample of the Component

import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";

ChartJS.register(ChartDataLabels, ArcElement, Tooltip, Legend);

export const data = [
  { lifetime_viewing_subs: 11497117, name: "US" },
  { lifetime_viewing_subs: 3777651, name: "LATAM" },
  { lifetime_viewing_subs: 2494138, name: "EMEA" }
];

const lifetime_viewing_subs_total = data.map(item => item.lifetime_viewing_subs).reduce((prev, next) => prev + next);

export const pieoptions = {
  responsive: true,
  plugins: {
    legend: {
      position: "bottom",
      align: "center"
    },
    datalabels: {
      color: function (context) {
        return context.dataset.borderColor;
      },
      anchor: "center",
      backgroundColor: function (context) {
        return context.dataset.background;
      },
      borderRadius: 100,
      borderWidth: 2,
      borderColor: function (context) {
        return context.dataset.borderColor;
      },
      display: function (context) {
        var dataset = context.dataset;
        var value = dataset.data[context.dataIndex];
        console.log("context.dataIndex: ", context.dataIndex); // 0,1,2
        console.log("dataset: ", dataset); // the dataset object
        console.log("value: ", value); // 0.1403653100534158, 0.647035726341284, 0.21259896360530017
      
        return value;
      },
      formatter: function (value) {
        return Math.round(value * 100).toFixed(0) + "%";
      },
      font: {
        weight: 500,
        size: "14rem"
      }
    }
  }
};

export const piedata = {
  labels: data.map((s) => s.name),
  datasets: [
    {
      data: data.map((s) => s.lifetime_viewing_subs/lifetime_viewing_subs_total),
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)"
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)"
      ],
      fill: true,
      borderWidth: 1
    }
  ]
};

export function App() {
  return (
    <Pie options={pieoptions} plugins={[ChartDataLabels]} data={piedata} />
  );
}

Here is a playground

Thanks in advance

Is there any way to convert chartjs into image?

I use chartJs to display charts in a web page. I would like to convert the graphics to an image format and then display them on my web page. I can do this with base64 encoding but I would like to be able to display my images in PNG format.

I'm trying to do this because, afterwards, I export my HMTL file to PDF with Dompdf and the latter does not display the images in base64.

How can I do this?

Setting ChartJS plugin on vue-chartjs not working

I am trying to change the canvas background color of my ChartJS chart to export it as an image but it has a black background. I've tried the workaround from the documentation but seems doesn't work. I have added the plugin definition, an example from ChartJS doc to my chartData. I believe I followed what the docs say from ChartJS and vue-chartjs but I don't understand what I did wrong. Is there another way to do this?

// inside vue template
<BarChart id="barChart" :chartData="chartData"/>

// inside js script
const chartData = {
                labels: [],
                datasets: [
                    {
                        label: "Positive",
                        backgroundColor: "#66bd63",
                        borderColor: "#66bd63",
                        barThickness: 40,
                        fill: false,
                        data: []
                    },
                    {
                        label: "Negative",
                        backgroundColor: "#f46d43",
                        borderColor: "#f46d43",
                        barThickness: 40,
                        fill: false,
                        data: []
                    },
                ],
                options: {
                    maintainAspectRatio: false,
                    responsive: true,
                    tooltips: {
                        mode: "index",
                        intersect: false
                    },
                    hover: {
                        mode: "nearest",
                        intersect: true
                    },
                    animation: {
                        onComplete: function() {
                            console.log("Hello")                        
                        }
                    },
                },
                plugins: [
                    {
                        id: 'custom_canvas_background_color',
                        beforeDraw: (chart) => {
                            const ctx = chart.canvas.getContext('2d');
                            ctx.save();
                            ctx.fillStyle = 'lightGreen'
                            ctx.restore()
                        }
                    }
                ]
            };

vue-chartjs not able to update the chart

I'm trying to understand how can I render a chart dynamically so after I can adapt it so can I send data to it trough MQTT so I can display data in real time.

The problem is the following: when I uncomment the this.speed.push(this.initial_speed + 1) line I get a Maximum call stack size exceeded error. The x axis is rendering dynamically (when the indicated line is commented) but I'm not able to make it work with both the axes.

I attach the sandbox to my code: sandbox

Thank you beforehand.

Vue 3 & Chart JS not updating labels

I'm trying to make a simple Vue3 app which show graphs using Chart.js

For this I'm trying to replicate the code shown in the vue-chart-3 plugin doc, which shows an example using a Doughnut chart

My objective is to show a Line graph with a horizontal time axis

The code is a simple App.vue which template is

<template>
  <LineChart v-bind="lineChartProps" />
</template>

And the script part:

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { LineChart, useLineChart } from "vue-chart-3";
import { Chart, ChartData, ChartOptions, registerables } from "chart.js";

Chart.register(...registerables);

export default defineComponent({
  name: "App",
  components: { LineChart },
  setup() {
    const dataValues = ref([30, 40, 60, 70, 5]);
    const dataLabels = ref(["Paris", "Nîmes", "Toulon", "Perpignan", "Autre"]);
    const toggleLegend = ref(true);

    const testData = computed<ChartData<"doughnut">>(() => ({
      labels: dataLabels.value,
      datasets: [
        {
          data: dataValues.value,
          backgroundColor: [
            "#77CEFF",
            "#0079AF",
            "#123E6B",
            "#97B0C4",
            "#A5C8ED",
          ],
        },
      ],
    }));

    const options = computed<ChartOptions<"doughnut">>(() => ({
      scales: {
        myScale: {
          type: "logarithmic",
          position: toggleLegend.value ? "left" : "right",
        },
      },
      plugins: {
        legend: {
          position: toggleLegend.value ? "top" : "bottom",
        },
        title: {
          display: true,
          text: "Chart.js Doughnut Chart",
        },
      },
    }));

    const { lineChartProps, lineChartRef } = useLineChart({
      chartData: testData,
      options,
    });

    function switchLegend() {
      toggleLegend.value = !toggleLegend.value;
    }

    return {
      switchLegend,
      testData,
      options,
      lineChartRef,
      lineChartProps,
    };
  },
  mounted() {
    if (localStorage.data == undefined) {
      localStorage.data = JSON.stringify(this.data);
    } else {
      this.data = localStorage.data;
    }

    let dataProcessed = JSON.parse(this.data);
    // console.log(JSON.parse(this.data));
    console.log(dataProcessed.data);
    var dates = [];
    // Obtain dates from dataProcessed Array
    for (var i = 0; i < dataProcessed.data.length; i++) {
      dates.push(dataProcessed.data[i].date);
    }
    this.testData.labes = dates;
    console.log(dates);
  },
});
</script>

The objective is that the mounted hook gets certain parameters of the LocalStorage and put them in the "labels" array of the "testData" variable, which is the one which aparently stores the X axis data of the chart.

In the VUE developer tool, it can be seen how this assignation process is done correctly, but in the chart of the left side, the data have not been updated.

Thank you for your help :D

Related questions

Chart object referencing vue-chartjs v4

See also questions close to this topic