How can we create external labels for a polar chart in ng2-charts and chart.js, with a set position outside the circular rings?

Currently, I am working on creating a polar chart using Angular along with chart.js version 2.8.0 and ng2-charts version 2.3.0. In my implementation, I have utilized the chartjs-plugin-datalabels to show labels within the polar chart rings. However, this plugin does not offer support for displaying labels at fixed positions outside the rings as shown in this external plugin designed for pie charts.

CODE:

myColors = [{ backgroundColor: ["rgb(203, 75, 75, 0.5)", "rgb(237, 194, 64, 0.5)", "rgb(175, 216, 248, 0.5)"] }];

ChartPlugins = [pluginDataLabels];

polarAreaChartOptions: ChartOptions = {
    
    plugins: {
      datalabels: {
         color: '#000000',
         anchor: 'end',
         align: 'end',
         padding: 50,
         display: true,
         font: {
           weight: 'bolder'
         },
         formatter: function(value, ctx) {
          return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`;
       },
      },
    },
    scale: {
      ticks: {
          beginAtZero: true,
          max: 100,
          min: 0,
          stepSize: 10
      },
      gridLines: {
        color: ['gray', 'gray', 'gray', 'gray', 'red','gray', 'gray', 'gray', 'gray', 'gray'],
        lineWidth: [1, 1, 1, 1, 3, 1, 1, 1, 1, 1]
      }
    }
  };
        
polarAreaChartType: ChartType = "polarArea";

Markup

<canvas id="polar-chart" baseChart height="40vh" width="120vw" 
                        [data]="polarAreaChartData" 
                        [labels]="polarAreaChartLabels"
                        [legend]="polarAreaLegend"
                        [plugins]="ChartPlugins"
                        [options]="polarAreaChartOptions"
                        [chartType]="polarAreaChartType" 
                        [colors]="myColors">        
                    </canvas>

https://i.sstatic.net/6ino8.png

I am currently looking for any plugins or addons that can help me display labels outside the rings in polar charts created using chart.js and ng2-charts.

javascriptangulartypescriptchart.jsng2-charts

Answer №1

If you upgrade to chart.js version 3, you have the option to utilize the built-in pointLabels feature and easily center them within your chart:

const options = {
  type: 'polarArea',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    scales: {
      r: {
        pointLabels: {
          display: true,
          centerPointLabels: true
        }
      }
    }
  }
}

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="myChart" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>

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

Fetching the value of ngModel from within ngFor loop - a step-by-step guide

<div class="form-horizontal" style="margin:auto;" *ngFor="#cmp of getUser"> <div class="form-group"> <label class="col-md-3 control-label">Name:</label> <div class="col-md-8"> <input type="te ...

angularangular2-ngmodel

Pause code execution and prompt user interaction within a loop - React

I have been working on adding an "add all" button to my React app. To achieve this, I am passing a function to the onClick method of the button: for (element in elements) { await uploadfunction(element) } const uploadfunction = async (element) => ...

reactjstypescript

Executing a JavaScript function across multiple elements: A step-by-step guide

I recently came across this code snippet on w3schools.com: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} body {font-family: Verdana, ...

javascripthtmlcssimagegallery

After reloading the page, Nuxt dynamic routes are displaying a 404 error

Hey there! I'm currently diving into a project that involves using nuxt js, and it's all new to me. I've set it up in spa mode without any modifications in the nuxt config file, just sticking with the default settings. Here's how I&apos ...

javascriptvue.jsvuejs2vue-routernuxt.js

I possess information stored within the array object below, and I aim to transform it into a different array object format

Here is the response I received from my API: let data = [ { date: '2021-04-27', formatted_date: 'Apr 27', location: [ { date: '2021-04-27', formatted_date: 'Apr 27', countr ...

javascriptarraystypescriptjavascript-objects

AngularJS allows for submitting form data to a new window by utilizing the form

At the moment, I have a JavaScript function that sends a form POST request and opens it in a new window. Now, I want to convert this into AngularJS. Here's the current function. The three parameters passed in determine the post URL and some data valu ...

javascriptangularjsformshttp-post

Retrieve JSON details for various games including their properties

I am currently working on a project that involves accessing Casino Games and their properties from a JSON object to display them on a website. Here is my progress so far: var x = $.getJSON("http://api.bosurl.net/V1/Progressive.asmx/GetProgressiveGames?for ...

javascriptjson

Using a CSS gradient with a variable in React.js - A guide to implementation

Looking to incorporate the following CSS property into the Navlink component. In the CSS file, the property is usually written like this using gradient. .ele { background-image: linear-gradient(45deg, #808080 25%, transparent 25%), li ...

javascriptcssreactjsreact-hookscss-gradients

What are the steps for implementing videojs vr in a Vue.js project?

After installing the videojs vr with npm install --save videojs-vr, I attempted to use it in my project: https://i.stack.imgur.com/lSOqF.png However, I encountered this error message: https://i.stack.imgur.com/QSe1g.png Any assistance would be greatly ...

javascriptvue.jsvue-componentvideo.js

Replace Material UI propTypes with new definitions

I am currently working with React, Typescript, and Material UI. To globally disable the ripple effect for the ListItem component, I am using createMuiTheme.props in the following manner: createMuiTheme({ props: { MuiListItem: { disableRipple: t ...

reactjstypescriptmaterial-ui

Identifying modifications within the @Input property in Angular 4

Can someone clarify how to detect changes in an @Input property within a component, rather than just when passed from its parent? I haven't found a clear answer to this yet. Thank you! ...

angularngonchanges

What method is best for deleting an item from the database in HTML structure - POST, GET, or XHR action?

I have a webpage that displays content in a table format and allows users to delete a specific row by clicking on it. The structure of my rows is as follows: foreach ($rewards as $reward) { echo '<tr id="' . $reward[&apos ...

javascriptphpjqueryhtmlajax

Tips on converting a Java regular expression to JavaScript regular expression

Can someone assist me in translating the Java Regex code below to JavaScript Regex? (\\\p{Upper}{2})(\\\d{2})([\\\p{Upper}\\\p{Digit}]{1,30}+) I attempted using the following JavaScript Regex: ...

javascriptregex

Utilizing AngularJS to upload numerous independent attachments to CouchDB

My goal is to upload multiple files to a couchdb document using angularjs. Despite my efforts with an angular.forEach loop, I am facing issues as the asynchronous $http calls do not wait for the previous loop to finish before moving on to the next one. Her ...

javascriptangularjscouchdb

How to dynamically populate a Vue multiple select dropdown with v-for loop?

I have been attempting to implement multi-select questions in Vue using v-for. The Select menu and its options are populated via JSON data. Unfortunately, I am facing difficulty in retrieving the selected results as expected. Whenever I select an option ...

javascriptvue.jsvuejs2

Extracting individual parameters from a specific URL in Angular 9

Imagine we have various types of urls: [1] /home/users/:id [2] /home/users/:id/posts/:id [3] /home/users/:id/posts/:id/comments/:id I am looking to create a method called parseUrl(url: string): any[] {} that can take a url as input and provide an array ...

angularurlangular-routingangular9urlparse

Sending SMS from an Angular application to mobile devices can be achieved through several methods

Does anyone have experience sending SMS from an Angular6 web application? I would appreciate any guidance, such as reference links or code samples. Thank you! ...

typescriptangular6node-modulessms-gatewayngxs

Generating exportable dynamic code in Javascript

Any assistance or links to similar inquiries would be greatly welcomed as I have conducted some research but am uncertain about the best approach to take in this situation. I find it difficult to articulate exactly what I need, so I have created a visual ...

javascriptdynamic-programmingmodularity

Is it possible to store an HTML element tag in a variable?

I've been learning JavaScript on w3schools and freecodecamp, but I stumbled upon something in w3schools that has me puzzled. Can someone please explain why this particular code snippet works? The variable "text" is declared as containing the string " ...

javascripthtml

Reverting Changes Made with JQuery Append

I have a table where each cell contains a button. When the button is pressed, it adds text to the cell. I am looking for a way to remove this text from the cell when the same button is pressed again. It's important to note that this button appears mul ...

javascriptjqueryhtml