Numerous occurrences of Vue-Chartjs

Question

Numerous occurrences of Vue-Chartjs

My goal is to incorporate multiple Doughnut type graphs into a single component. Resource:

<div class="row">
    <div class="col-12 col-lg-6">
        <strong>All</strong>
        <Doughnut chart-id="workNonWorkData" :dataset-id-key="'key1'" :chart-data="workNonWorkData" />
    </div>
    <div class="col-12 col-lg-6">
        <strong>Approved</strong>
        <Doughnut chart-id="workNonWorkAprData" :dataset-id-key="'key2'" :chart-data="workNonWorkAprData" />
    </div>
</div>

Each doughnut operates individually when the other one is removed. However, when both are present, only the latter displays. I've verified that the canvas ids are unique. Could Vue be interpreting these as the same instance?

javascript vue.js chart.js vue-chartjs

Answer 1

Answer №1

After switching from version 4.0.4 to 4.0.3, I found that it is now functioning properly.

I hope this information proves beneficial.

Answer 2

After switching from version 4.0.4 to 4.0.3, I found that it is now functioning properly.

I hope this information proves beneficial.

Answer 3

Answer №2

<script>
import { Bar } from "vue-chartjs";
import Chart from "chart.js";

var customPlugin = function(chart) {
    var width = chart.chart.width;
    var height = chart.chart.height;
    var ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = (height / 112).toFixed(2);
    ctx.font = fontSize 
    ctx.textBaseline = "middle";
    var text = 90;
    var textX = Math.round((width - ctx.measureText(text).width) / 4);
    var textY = height / 4;
    ctx.fillText(text, textX, textY);
    ctx.save();
}

export default {
  extends: Bar,

return {     
      options: {}
}

mounted(){
    this.addPlugin({
      id: 'custom-plugin',
      beforeDraw: customPlugin
    });
}

Answer 4

<script>
import { Bar } from "vue-chartjs";
import Chart from "chart.js";

var customPlugin = function(chart) {
    var width = chart.chart.width;
    var height = chart.chart.height;
    var ctx = chart.chart.ctx;
    ctx.restore();
    var fontSize = (height / 112).toFixed(2);
    ctx.font = fontSize 
    ctx.textBaseline = "middle";
    var text = 90;
    var textX = Math.round((width - ctx.measureText(text).width) / 4);
    var textY = height / 4;
    ctx.fillText(text, textX, textY);
    ctx.save();
}

export default {
  extends: Bar,

return {     
      options: {}
}

mounted(){
    this.addPlugin({
      id: 'custom-plugin',
      beforeDraw: customPlugin
    });
}

Numerous occurrences of Vue-Chartjs

Answer №1

Answer №2

Similar questions

Instructions on how to make a radio button selected when clicked are as follows:

Managing top scores for my game using a JSON data storage

Developing a customized autosuggest feature using AJAX with comprehensive keyboard accessibility

What is the reason for elements such as "if" and "else" not being visually

Issue encountered while invoking the jQuery html method

`How can I integrate jQuery UI using Webpack in my project?`

JavaScript - Toggle Checkbox State Based on Array Values

javascript/jquery - steps to design an effective modal page overlay

Swap a jQuery class with another if the class for ul li is currently active

Dealing with Error TS2769 in Visual Studio Code when passing props to a custom component in Vue 2 with Typescript

Using VueJS: How can I reference a variable by its string name instead of directly in a template?

How to send a value to a function in Angular from a different function?

Using jQuery to select the next table cell vertically

Incorporating Vuetify into a Vue CLI application with the help of webpack

Developing a dynamic table using data retrieved from an API within a JS React Bootstrap framework

What is the best way to add a bootstrap file to my ejs templates?

Using curly brackets as function parameters

What is the best way to conceal a conditional panel in a Shiny app using JavaScript when any action or button is clicked that is not one of the designated inputs

Engaging with tasks like incorporating fresh elements into JavaScript code

Is it possible to eliminate a style that was applied using the .css() method?