Deciphering HighCharts Parameters - understanding plotX, plotLeft, and shapeArgs

Could anyone provide information on where to find the definitions of different Series object properties like plotX, plotLeft in highcharts?

I have looked through the documentation but couldn't locate it.

I am currently trying to comprehend this particular piece of code.

$(function () {
$('#container').highcharts({

    chart: {
        type: 'column'
    },


    plotOptions: {
        column: {
            stacking: 'normal',
            point: {
                events: {
                    mouseOver: function () {
                        var chart = this.series.chart,
                            r = chart.renderer,
                            shape = this.shapeArgs,
                            xAxis = this.series.xAxis,
                            yAxis = this.series.yAxis,
                            y = yAxis.toPixels(this.total),
                            x = this.plotX + chart.plotLeft - shape.width / 2,
                            height = yAxis.toPixels(yAxis.min) - y;

                        if (chart.hoverStack) {
                            chart.hoverStack.destroy()
                        }

                        chart.hoverStack = r.rect(x, y, shape.width, height).attr({
                            'stroke-width': 6,
                                'stroke': 'black',
                            fill: 'transparent',
                        }).add();

                    },
                    mouseOut: function () {
                        if (this.series.chart.hoverStack) {
                            this.series.chart.hoverStack.destroy();
                            this.series.chart.hoverStack = false
                        }
                    }
                }
            }
        }
    },
    series: [{
        type: 'column',
        name: 'John',
        data: [3, 3, 3, 3, 3]
    }, {
        type: 'column',
        name: 'Bob',
        data: [5, 3, 4, 7, 2]
    }, {
        type: 'column',
        name: 'Joe',
        data: [2, 2, 2, 2, 2]
    }, {
        type: 'column',
        name: 'Ken',
        data: [3, 4, 4, 2, 5]
    }]
});

});

http://jsfiddle.net/3Utat/25/

Answer №1

If you prefer bars over columns, try this:

plotOptions: {
        bar: {
            point: {
                events: {
                    mouseOver: function(){
                        console.log(this);
                    }
                }
            }
        }
    }

Hover over the bar to see the values. I hope this information is useful.

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

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT". Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight s ...

Stop Caching with Jquery Infinite Scroll (IAS)

I am using jQuery + IAS to implement infinite scroll functionality on my website. However, I have encountered an issue where the cache is being disabled when making requests for new content. Specifically, the URL that is accessed to retrieve the next page ...

Divided Progress Indicators in Bootstrap 3

Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding. The challenge I'm facing is developing a progress bar that accurately reflects the number of items ...

Checking if the current time falls within a specific time range, without taking the year into account, using Javascript

I am looking to add a special feature using JavaScript. I would like to change the background images of my webpage to ones related to Christmas during the holiday week, and have it repeat every year. How can I determine if the current date and time fall ...

I am struggling to make my Bootstrap 5 Navbar transparent. Can anyone help me figure this out?

I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck. Even after setting the background to transparent and ensuring t ...

showcasing extensive information in asp.net data tables

I am seeking alternative methods for displaying data in a gridview with approximately 500 - 1000 rows. The ideal grid should allow for keyboard navigation, so I have implemented jQuery functions to support this feature. However, upon loading 500 rows into ...

What is the best way to verify all the UL elements within a hierarchy of checkboxes

Query: In my category listings, some categories have children. I am attempting to implement an "ALL" category that, when selected, will automatically check all sibling checkboxes in the same category. For example, clicking on ALL under the MUSIC category ...

Ensure that the width of the table rows (tr) matches the width of the table header

I'm currently working on implementing a sticky table header. The issue I'm facing is that the width of tableHeaderRow does not match the width of tableHeader. Steps taken for creating sticky header: Make an Ajax call to populate the table with ...

Enhancing Contact Form 7 with features like a 'select all checkbox' and a 'show more/show less button'

I need to include four checkboxes on every contact form 7 throughout the website. The first checkbox should act as a master selector for the other 3 checkboxes. The second checkbox relates to our privacy policy. Checkbox number three is for marketi ...

Arranging flex items in a row next to another flexbox container with aligned direction

Is it possible to mix flex directions column and row within the same div? Let's take a look at an example: https://i.sstatic.net/Gumu5.png .container { display: flex; } .container .left { display: flex; align-items: center; flex: 1; } .co ...

Creating a fixed footer within a div that is absolutely positioned using CSS

I am looking to implement a sticky footer within an absolutely positioned div element. My initial approach was to position the footer div absolutely as well - within an additional relatively positioned "page" div (which would contain the main content of t ...

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

Does Javascript move beyond the for loop and then return to it?

Currently, I am working on creating a stopwatch in JavaScript that counts by milliseconds using setTimeout. However, I encountered an issue during the initial setup: var time = 0; function main() { for (var i = 0; i < 5; i++) { setTimeou ...

I require a picture to fill up as much space as possible, regardless of its initial dimensions

As I work on my react-native app, I encounter a challenge regarding the layout. My application consists of a top bar and a bottom bar with an image in between. The image needs to fill up as much space as possible without overlapping the bars. Despite numer ...

Control the outcome of ajax response

I have implemented an ajax post method to retrieve data from the backend. $.ajax({ type: "POST", url: URL_one, data: submitData }).then(function (response) { console.log("Ajax response", response); }); Upon inspecting th ...

Compile once you have assigned the directive to the HTML element

I'm attempting to attach a directive to an HTML element within a specific jQuery event using .attr(). However, the directive doesn't seem to take effect after it's been added. angular.module("myApp", []) .directive("myDirective", functi ...

Display the button on a separate row for smaller screens in Bootstrap 4, but ensure it remains in the same row for larger screens

I'm struggling with what seems like a simple task: My goal is to design a sticky bottom-bar (similar to a cookie notification) containing two lines of text and a button. I need the button to be aligned next to the text on desktop, but on mobile, it s ...

Creating a dynamic form where input fields and their values update based on user input in jQuery

In my form, I have an input field where users will enter an ISBN number. Based on the input number, I need to populate two other input fields: one for book title and one for author name. I am currently calling a JavaScript function on the onblur event of ...

Generate a CSV file from a MySQL database using PHP

<?php include("includes/config.php"); if ($_POST['frmCsv']) { $strSelect = performCsvSelection(); header( 'Content-Type: text/csv' ); header( 'Content-Disposition: attachment;filename=export.csv& ...

Tweaking react-lottie and SVG dimensions with CSS media queries: A step-by-step guide

I am currently working on a React project that involves displaying Lottie-react animations and SVG's. My main concern is making sure that these illustrations are responsive on my website. The components are stored in a .js file, which I import into m ...