Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend.

Similar to how it works when hovering over a single piece of the donut chart.

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'distrubution_of_funds',
            type: 'pie',
            borderRadius: 0
        },

...

        series: [ {
            name: 'Versions',
            data: [{
                "name": "№ 123 (manager)",
                "y":2709.74,
                "color": "#E85620"
            },{
                "name": "№ 333",
                "y":885.5,
                "color": "#92B145"
            }, {
                "name": "other (127)",
                "y": 3151.3274920329,
                "isOther": true,
                "color": "#B6B9BE"
            }],
            size: '80%',
            innerSize: '60%',
            showInLegend: true,
           dataLabels: {
                enabled: false

            }
        }],

        legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical',
            useHTML: true,
            width: 160,

        }

    },
    function(chart) { 

        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;

        // Render the text
        chart.innerText = chart.renderer.text('$$$',  270, 210).css({

            color: '#0f1122',
            fontSize: '16px',
            textAlign: 'center'
        }).attr({zIndex: 999}).add();
    });

Any ideas on how to achieve this?

For an example of a working chart, check out this page

javascriptjqueryhtmlcsshighcharts

Answer №1

To streamline the code, I included the jquery library instead of using vanilla javascript for this solution. Within the function(chart) { // on complete section, I inserted the following code:

 $(chart.series[0].data).each(function(i, serie){
      $(serie.legendItem.element).hover(function(){
          chart.innerText.attr({text: serie.y})
      }, function(){
          chart.innerText.attr({text: '$$$'});
      });                
 });

In essence, this code attaches a hover event to each legendItem element, altering the chart's innerText attribute to display the y property of the serie.

For demonstration purposes, you can view it in action here: JSFiddle demo

Answer №2

Here is the solution:

http://jsfiddle.net/fw71sxx6/7/

I utilized jQuery to implement this functionality in the chart : 

// Display the text
            chart.innerText = chart.renderer.text('$$$',  270, 210).css({

                color: '#0f1122',
                fontSize: '16px',
                textAlign: 'center',
                display: 'none'
            }).attr({
                class:'getlegend',
                zIndex: 999
            }).add();

Additionally, I included this script: 

$( document ).ready(function() {
  $('.highcharts-series').mouseover(function() {
       $('.showlegend').html($('.getlegend').html());
  });
});

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

Center align the list items on mobile using flex in bootstrap 4

At the top of my page, I have a div called header_full_width. This div spans 100% of the width of the page. Within this div, there is a container, a row, a col-md-12 div, and an unordered list with list items and links. My issue is that on mobile devices, ...

htmlcsstwitter-bootstrapbootstrap-4anchor

Incorporate an image icon into an Angular grid

Currently, I am in the process of building a web application using Angular. The main goal is to create a grid and color specific cells based on data input. Below is the snippet of my HTML code: <mat-grid-list cols="10"> <mat-grid-tile * ...

htmlcssangulartypescript

Using jQuery to selectively hide elements that are currently visible

I have 5 interactive buttons that control the visibility of corresponding points on a detailed SVG map. The buttons are labeled #icon1, #icon2, #icon3, #icon4, and #icon5. All points on the map belong to the .poi-hover class. Using jQuery to Show/Hide Poi ...

jquery

Sending a blob through AJAX to a different domain using CORS

Could someone please explain why my current request is being blocked by the SO policy restriction? Javascript Code: var blob = new Blob([req.response], {type: "application/octet-stream"}); req = new XMLHttpRequest(); req.open("POST", ws_path(other_contex ...

javascriptphpajaxcorssame-origin-policy

Angular 4 with Universal: Implementing 404 Status Code in Header for /404 Page Component

After researching and reviewing numerous StackOverflow inquiries, I have come to the conclusion that headers are derived from responses served by servers, making it a non-issue. I attempted to rectify the situation from my server.ts file but unfortunately ...

javascriptangularexpressangular2-routingangular-universal

Strategies for adjusting text size to fit within a resizable div container

I'm facing an issue with a resizable div that has text inside. When I resize the div, the last line of the text goes beyond the boundaries of the div. How can I ensure that all the text fits within the resizable div while maintaining the appropriate f ...

jquerycssjquery-uiresizefont-size

Choose all the items that are visible in the list using Angular

If you have the following ng-repeat: <ul class="list-group"> <ng-user-item ng-repeat="user in users | filter:search" user="user" ng-if="assigned.indexOf(user.id) < 0" ng-click="selectFunction(user);"></ng-use ...

javascriptangularjs

Can a specific input value be applied or utilized in any way?

I have limited coding experience, so please forgive me if this is a simple question. I am curious if it is possible to create a feature on a website where user input is utilized elsewhere. Specifically, I am looking to have an input box where a user enter ...

javascripthtmlcss

No Angularjs redirection without the "onload" event

In my search for a solution, I came across this answer but it did not quite fit my needs: Pass onload event through redirect The issue I'm facing is that I want the AngularJS section of my application to reload something when the user is redirected ...

javascriptangularjshttp-redirect

Control the transparency of the initial parent div that includes an *ngFor loop

I want to add opacity only to the first div which contains an icon and a heading in another nested div. The second div should remain fully visible (opacity: 1). Here is the HTML structure: <div class="row clearfix"> <div class="col-lg-3 col- ...

htmlcssangulartypescript

How can we leverage Shared and Core modules alongside Feature modules in Angular development?

When developing my Angular application, I have adopted a specific architecture approach and included a shared.module.ts file in the shared folder. While leveraging lazy-loading in my app, I find myself puzzled about the necessary imports, declarations, and ...

javascriptangulartypescriptangular-routingangular-module

Remove the javascript file once the modal dialog has been closed

One of the challenges I'm facing is with a modal dialog that has been customized to appear on the right side of the customer's browser. Depending on the icon clicked in the navigation bar, an ajax call is made and an HTML fragment is loaded into ...

jqueryajaxbootstrap-5

Tips for aligning flex items based on the previous item in a flex container

Place 'text1' beneath the number 1 (so that the 't' character is under the 1), and 'text2' beneath the number 5 (with the '2' character under the number 5) This should be done dynamically to adjust to a varying numb ...

htmlcssangularflexboxcss-selectors

Top techniques for dynamic loading of HTML and Javascript

I recently implemented a page that uses XHR requests to load a modal box containing a form. The form is comprised of HTML tags along with some JavaScript for validation and submission through another XHR request. Although the functionality works as intend ...

javascriptjqueryajaxdomxmlhttprequest

Tips for structuring a SQL query result in an AngularJS application

Forgive me if this code is not up to par with the best standards, as I am still relatively new to angular.js. The issue I am facing is that when the data is returned from my query, it appears as a block of text. Despite using echo statements in search.php ...

phphtmlmysqlangularjs

I am curious about how to implement a feature where clicking on a navigation bar item automatically scrolls the webpage to the corresponding section

Currently, I am utilizing React alongside JavaScript to create a personal portfolio website. I have been exploring ways to achieve smooth scrolling to specific sections on the same page when interacting with the navigation bar. Below is the snippet of cod ...

htmlreactjsreact-router

Arranging elements based on specific coordinates

const renderTimeSlots = () => { const timeSlots = []; for (let i = parseInt(workStartsAt); i <= parseInt(workEndsAt); i++) { if (i !== 0) { timeSlots.push( <div className="flex flex-row cursor-pointer"> ...

javascriptreactjsnext.jstailwind-css

ReactJS incorporates multiple CSS files

I am currently working on developing a Single Page Application using ReactJS. However, I am facing an issue with styling. Currently, I have created 3 different pages (with the intention of adding more in the future), each having its own CSS file that is im ...

javascriptcssreactjsreact-routerjsx

Which callback function is best suited for handling the response in an XMLHttpRequest and rendering it on the webpage?

Upon a user action on the page, an AJAX request is made to my Node.js Express server to send data. Here's what happens next: router.post('/', function(req, res){ //user authentication first, then inside that callback res.redirect('/d ...

javascriptajaxnode.jsexpress

Implementing a callback function following the completion of file reading in Phonegap

I have been facing this issue for quite some time now and I need assistance in finding a solution: When it comes to developing an android app, I rely on the phonegap framework. There is an async function called readFromFile() that reads a json file store ...

javascriptjqueryjquery-mobilecordova