Revise iconic titles [vue-chart.js]

I am working on rendering a Doughnut chart using vue-chart.js. My goal is to edit only the legend labels so that if I have a 'very long string,' it will display as 'very lo...' in the legend, while still showing the full labels on hover in the tooltip.

export default {
  extends: Doughnut,
  mixins: [reactiveProp],
  data: () => ({
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
      }
    }
  }),
  mounted() {
    this.renderChart(this.chartdata, this.options);
  }
};

https://i.sstatic.net/HGqPg.png

Can anyone provide guidance on how I can achieve this?

javascriptvue.jschart.jsvue-chartjs

Answer №1

The array of strings in my case represents the labels as follows:

<doughnut-chart
    :height="100"
    :options="pieChartCustomizations"
    :data="pieChartData"
/>

The labels are defined within the pieChartData, which is a computed property that returns:

{
        datasets: [
          /* Outer doughnut data starts */
          {
            data: [this.kpi.activities.total, this.kpi.products.total],
            backgroundColor: [
              'rgb(0, 255, 0)', // green
              'rgb(0, 0, 255)', // blue
            ],
          },
        ],
        //You can customize the labels via a computed property or directly in the options
        labels: ['Activities', 'Products'],
      };

Hence, you have flexibility to manipulate the label values as needed since they are just strings.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing an AJAX call to communicate with a PHP function script within a REST (Paypal) module successfully functions with jQuery, however it encounters issues when trying

I've been struggling with a mental block for hours, trying to figure this out. In a Paypal REST success section, I'm attempting to call a function. Prior to moving it to the REST section, I tested it with a regular button onclick event, and it w ...

javascriptphpjquerypaypal

Dynamic CSS class alteration on scrolling using Vue.js

I am currently in the process of developing a web application using vueJs and bootstrap. I am interested in figuring out how to dynamically change the CSS class of an element based on scrolling behavior. Is there a vue-specific method that can achieve this ...

htmlcsstwitter-bootstrapvue.js

Is it possible to trigger the touchend event in Vue without first triggering touchstart?

My mousedown and mouseup events are functioning perfectly on desktop, but now I need to ensure they work on mobile devices as well. The code that is currently working on desktop is as follows: <rect :x="xPos" :y="yPos" width=&quo ...

vue.jsvuejs3

Transform an array from two dimensions to one dimension, while applying specific exceptions

Hello everyone, I'm revisiting a question from before that hasn't been resolved yet. I have a simple requirement - I need a code that will convert my 2D array into a 1D array under one condition. A[0,2,3,7,0,0,5,3][0,2,2,4,0,0,3,0] The desired ...

javascriptjqueryarrays

Display the value of a JavaScript variable in a Codeception Acceptance test

Is there a way to view the value of a vanilla JavaScript variable while running an acceptance test? In PHP, you can see the value of a variable in debug using $I->seeMyVar($var), but how can you pass the value of a JavaScript variable to a PHP variable ...

javascriptphpvariablesxmlhttprequestcodeception

Troubleshooting Firebase AppCheck v8 in React: Encountering a 400 error message stating "App ID is Invalid: 'undefined'"

I've been attempting to integrate appCheck into my Firebase project. Despite following the instructions in the Firebase documentation and consulting several StackOverflow posts, I'm encountering difficulties getting it to function correctly. When ...

javascriptreactjsfirebase

Tips for implementing event handlers on dynamically generated li elements in VueJS

Creating multiple ul elements using v-for in the following way <div v-for="item in info"> <ul> <li><a>{{item.number}}</a></li> <li><a>{{item.alphabet}}</a></li> </ul> </div&g ...

javascripthtmlvue.js

Having trouble getting hot reload to work for your Vue CLI project after switching from yarn to npm? And no luck finding any config files to

Because of a request from clients/coworkers, I had to switch to npm. The original Project was set up using Vue CLI and Yarn as the default Package Manager. At first, I thought it would be simple. I deleted the node_modules folder and yarn.lock file. Then, ...

vue.jsnpmwebpackyarnpkgvue-cli

The ng-repeat directive is limited to functionality only within parent divs that have the id of

Is there a way to make ng-repeat work only in one specific place by defining an id where it should apply? I would like to achieve this functionality from the controller. For example, using something like $(#1).(ng-repeat work) Here is an example: <t ...

javascriptjqueryangularjs

Our express.js does not recognize GET requests from routers

When placeholders and predefined routes coexist in the same location, the predefined routes are never called if the placeholder was declared before them. For example: router.get("/:id", fetchEntry) router.get("/fancy-action/", doSomet ...

javascriptnode.jsexpress

When working with Typescript and Vue.js, it's important to ensure that properties are initialized before

Check out the following code snippet: export default class PrimitiveLink extends Vue { style = { // Reset display: 'inline-block', textDecoration: 'none', outline: 'none', // Theme ...this.themeStyle ...

typescriptvue.js

I've come across some strange JavaScript code while tinkering with an Express/Socket.io application

I am currently working on developing an app similar to SCADA using Brian Ford's amazing https://github.com/btford/angular-socket-io-seed as a starting point. However, I have encountered some JavaScript code that I find quite confusing. I have tried se ...

javascriptnode.jsexpresssocket.io

Looking to dissect JSON output containing the object labeled as "@attributes"?

Using JQuery AJAX, I made an HTTP request to a PHP back-end in order to retrieve an XML string parsed into JSON using the json_encode() function. Some of the XML elements contain attributes which are represented as @attributes in the output. However, when ...

javascriptphpjqueryjsonajax

I am unable to retrieve information from Firebase in Vue

Currently, I am following a tutorial on YouTube to enhance my knowledge about storing data in Firebase and then utilizing it in a Vue application. (You can watch the tutorial at this link: https://www.youtube.com/watch?v=Htt8AKeF1Kw, you will encounter the ...

javascriptfirebasevue.jsgoogle-cloud-firestore

If Android App is not installed, divert users to a personalized web page instead of the Play Store

I am trying to create a link that opens an app on Android when clicked. However, if the app is not installed, it redirects to the Play store by default. This is not the behavior I want. What I would like is for the link to redirect to a custom webpage ins ...

javascriptandroidgoogle-play

Having trouble with Console.log not working in AJAX and React?

import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import Profile from './Github/Profile.jsx'; class App extends Component{ constructor(props){ super(props); this.state = { ...

javascriptajaxreactjs

What are the mechanics behind Vue.js's reactivity feature?

When working with a Vue component like "TransportComponenet.vue", Vue automatically generates getters and setters for properties declared in the data() function, such as carId and transportId. In the component's view, expressions like {{carId + transp ...

vue.jsvuejs2vue-component

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

I attempted the following code, but I am only able to access values for cardno and cardtype. Why can't I access the others? Any suggestions? <tr ng-repeat="data in myData17.layouts"> <td ng-show="$index==1">{{data.name}}</td> &l ...

javascripthtmlangularjsangularjs-ng-repeatdynamic-tables

In Typescript, it is not possible to assign the type 'any' to a string, but I am attempting to assign a value that is

I'm new to TypeScript and currently learning about how types function in this language. Additionally, I'm utilizing MaterialUI for this particular project. The issue I'm encountering involves attempting to assign an any value to a variable ...

javascripttypescripttypesmaterial-ui

Formik Alert: Update depth limit reached

Currently, I am working on an EDIT formik form that is displayed as a MODAL. The issue arises when the setState function is triggered with setState(true), causing the form to appear without any onClick event. Despite changing onClick={editStory} to onClick ...

javascriptreactjsreact-hooksnext.jsformik