Spinning tags on the bottom portion of the circular graph

Question

Spinning tags on the bottom portion of the circular graph

I'm currently utilizing Chart.js to create a pie chart.

My goal is to rotate the labels on the bottom half of the pie chart.

Below is my existing code for generating the pie chart:

$(document).ready(
  function() {
    var data = {
      datasets: [{
        data: [125, 125, 125, 125, 125, 125, 125, 125],
        backgroundColor: ["#FE4D42","#FFD405","#58E152","#00D59F","#8B7DFF","#E85FED","#F71663","#4F94FF"]
      }],
      labels: [
            "Arts and Creativity",
            "Careers and Employment",
            "Communities and Social",
            "Culture and Heritage",
            "Learning and Skills",
            "Personal Finance",
            "Self-Environment",
            "Wellbeing"
      ]
    };
      
    var labels_url = {
      "Arts and Creativity" : "arts-and-creativity",
      "Careers and Employment" : "careers-and-employment",
      "Communities and Social" : "communities-and-social",
      "Culture and Heritage" : "culture-and-heritage",
      "Wellbeing" : "health",
      "Learning and Skills" : "learning-and-skills",
      "Personal Finance" : "personal-finance",
      "Self-Environment" : "self-environment"
    };
    
    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");
    var myNewChart = new Chart(ctx,{
      type: 'pie',
      data: data,
      options: {
        legend: {
            display: false, 
        },
        plugins: {
          labels: {
            render: 'label',
            arc: true,
            fontColor:["#FF7805","#0854A3","#14A400","#048A7D","#502788","#F200F2","#FF0068","#000962"],
            fontSize: 18,
            position: 'outside'
          }
        }
      }
    });

    canvas.onclick = function(evt) {
      var activePoints = myNewChart.getElementsAtEvent(evt);
      if (activePoints[0]) {
        var chartData = activePoints[0]['_chart'].config.data;
        var idx = activePoints[0]['_index'];

        var label = chartData.labels[idx];
        var value = chartData.datasets[0].data[idx];

        var url = "https://www.maximiseme.co.uk/" + labels_url[label];
        //alert(url);
        console.log(url);
        window.location.href = url;
      }
    };
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

<canvas id="myChart"></canvas>

To enhance readability, I would like to rotate the following labels by 180 degrees: Communities and Social, Culture and Heritage, Learning and Skills, Personal Finance.

html jquery css chart.js

Answer 1

Answer №1

Attempting to achieve a specific goal using the current libraries may prove challenging as the labels in question are governed by the chartjs-plugin-labels, which lacks the functionality to alter the orientation of the text rendering. Moreover, this plugin has not seen active development for the past 6 years.

However, in light of the succinct and clear sample provided, one potential solution involves implementing a workaround by manipulating the existing code within the chartjs-plugin-labels. Alternatively, one could explore the option of creating a fork of the plugin repository and incorporating similar modifications more directly.

The proposed workaround introduces a new configurable option under plugins.labels named reverse. When absent, the default value for reverse is false across all elements. The behavior mirrors that of fontColor, being both indexable and scriptable. If an arc element is assigned with the reverse: true attribute, its corresponding label will be displayed in a counter-clockwise fashion; otherwise, it follows the typical clockwise rotation.

No extensive elucidation is required, as the specifics can be gleaned from examining the code itself.

var pluginLabelsExtension = {
    afterDatasetsUpdate(chart){
        if(chart._labels && chart._labels.length > 0){
            this._installLabelPatch(chart._labels[0].constructor);
        }
    },
    // Additional functions and code implementation
}
// Additional code snippets included within the extension

$(document).ready(
    function() {
        var data = {...};   // Data object initialization for the Chart.js pie chart
        
        var labels_url = { ... };   // URL mappings for chart labels
        
        var canvas = document.getElementById("myChart");
        // Further chart setup and configurations
      
        // Canvas click event handling for redirection based on selected chart element
    }
);

<canvas id="myChart" style="width: 1000px; height: 1000px"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

Answer 2

Attempting to achieve a specific goal using the current libraries may prove challenging as the labels in question are governed by the chartjs-plugin-labels, which lacks the functionality to alter the orientation of the text rendering. Moreover, this plugin has not seen active development for the past 6 years.

However, in light of the succinct and clear sample provided, one potential solution involves implementing a workaround by manipulating the existing code within the chartjs-plugin-labels. Alternatively, one could explore the option of creating a fork of the plugin repository and incorporating similar modifications more directly.

The proposed workaround introduces a new configurable option under plugins.labels named reverse. When absent, the default value for reverse is false across all elements. The behavior mirrors that of fontColor, being both indexable and scriptable. If an arc element is assigned with the reverse: true attribute, its corresponding label will be displayed in a counter-clockwise fashion; otherwise, it follows the typical clockwise rotation.

No extensive elucidation is required, as the specifics can be gleaned from examining the code itself.

var pluginLabelsExtension = {
    afterDatasetsUpdate(chart){
        if(chart._labels && chart._labels.length > 0){
            this._installLabelPatch(chart._labels[0].constructor);
        }
    },
    // Additional functions and code implementation
}
// Additional code snippets included within the extension

$(document).ready(
    function() {
        var data = {...};   // Data object initialization for the Chart.js pie chart
        
        var labels_url = { ... };   // URL mappings for chart labels
        
        var canvas = document.getElementById("myChart");
        // Further chart setup and configurations
      
        // Canvas click event handling for redirection based on selected chart element
    }
);

<canvas id="myChart" style="width: 1000px; height: 1000px"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>

Spinning tags on the bottom portion of the circular graph

Answer №1

Similar questions

What is the method to adjust line spacing of hyperlinks in JavaFX?

Is Joomla.submitbutton('module.apply') causing the page to refresh?

Creating Functional Tabs Using CSS and JavaScript

CSS and jQuery UI URLs are not resolving properly in MVC framework after deployment

Underline Rows in CSS

Creating an intricate table layout using AngularJS and the ngRepeat directive

Python's web scraping with Selenium

flexbox used to create a fixed sidebar on the left

I am currently in the process of creating a website navbar with HTML and Tailwindcss, but unfortunately, I am running into issues with the desired functionality not being

jQuery - Instances are sharing a variable

Zero as the result of Jquery selector's length measurement

What is the process for moving the final character to the beginning of a string?

Is it possible to update the text within a button when hovering over it in Angular?

Using Ajax BeginForm can result in the sending of multiple requests, even when only a single

Animate the child element of this selector using jQuery

Discovering the specific element that was clicked from a collection of elements

How come my items are not appearing on my SharePoint list?

`Issue with input focus in jQuery``

The onBlur attribute does not seem to be functioning properly under a specific condition

HTML - Using Tables to Add and Edit Rows