[When clicking on the x-axis, the values go from 0 to 1. I need the x-axis categories values to display on click event. When hovering over the x-axis value, it shows properly, but clicking on the x-axis does not show the correct values]
Check out this fiddle: jsfiddle.net/f25rzxmu/1/
Give this code snippet a shot
To access the x-axis categories values, use this.x instead of this.category.
.attr({ text: 'x: ' + this.x + ' y: ' + this.y + ' field: ' + this.series.name })
Highcharts.chart('container', {
title: {
text: 'Mouse click demo'
},
subtitle: {
text: 'Values will be displayed in top left on point click or mouse out'
},
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
crosshair: 'true'
},
plotOptions: {
series: {
point: {
events: {
click: function () {
var chart = this.series.chart;
debugger;
if (!chart.lbl) {
chart.lbl = chart.renderer.label('')
.attr({
padding: 10,
r: 10,
fill: Highcharts.getOptions().colors[1]
})
.css({
color: '#FFFFFF'
})
.add();
}
chart.lbl
.show()
.attr({
text: 'x: ' + this.x + ' y: ' + this.y + ' field: ' +this.series.name
});
}
}
},
events: {
mouseOut: function () {
if (this.chart.lbl) {
this.chart.lbl.hide();
}
}
}
}
},
tooltip: {
enabled: true
},
series: [{
name: "Tokyo",
data: [49.9, 71.5, 106.4, 129.2, 144, 176, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: "New York",
data: [83.6, 78.8, 98.5, 93.4, 106, 84.5, 105, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: "London",
data: [48.9, 38.8, 39.3, 41.4, 47, 48.3, 59, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: "Berlin",
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});#reporting {
position: absolute;
top: 55px;
right: 20px;
font: 12px Arial, Verdana;
color: #666;
background: white;
}<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>I have been exploring Canva's Button JS API which can be found at My goal is to implement a modular approach in utilizing their API, only loading the CanvaJS when necessary. My implementation involves triggering the load function when a button is cli ...
Currently, I am working on styling a React component in a way that allows for either horizontal or vertical styling without using flexbox. My question is, how can I pass styles down to the component in a way that applies individual styles to the child ele ...
I've integrated sessions in my express.js application using Mozilla's client-sessions and I'm encountering an issue. My post and get requests are in router.js, while the middleware is in app.js. When I try to run it, I receive the following ...
I am currently struggling with adding a drop-down list to my form that displays 2 values, with the second value having a different text color (light gray). After some research, it seems like I need to use JavaScript for this customization. However, as I am ...
Currently, I am facing an issue with my menu. I want to clear previously visited links while keeping the current one styled as a:visited in CSS. Although I have attempted to achieve this, unfortunately, the code is not functioning properly. Here is what I ...
Currently, I am implementing the FME filter along with an infinite Ajax scroll feature. You can find more information about these tools at this link. My goal is to utilize the side filter and have more products load as I scroll down the page using jQuery. ...
I am working with an array that is continuously updated with new string elements every 2 seconds. The code snippet below showcases how the updates are processed: //tick world setInterval(function(){ doTradeUpdate(); },5000); function doTradeUpdate(){ ...
I'm encountering an issue with this code that's preventing it from running properly on Google Chrome (I haven't tried other browsers). When the content displays, the regular paragraphs appear aligned to the far left instead of being centered ...
Hey there! I have a quick question - Is it possible to have multiple mdl-sheets on one page that all share the same form? I tried implementing this but ended up with them overlapping each other instead of displaying next to each other from left to right. ...
I've been curious about why, in a situation where the onFulfilled handler of then() returns a promise p2, then() creates a new promise p3 instead of simply returning p2? For example: let p1 = new Promise(function(resolve, reject) { resolve(42); ...
I am currently working on a custom MVC structure using Handlebars and jQuery Mobile. To manually manage routing, I have disabled two jQM parameters: $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; These lines disable link bind ...
I've defined a custom theme in my App.js file like this: let theme = createTheme({ palette: { bgCells: { textAlign: 'right', color: '#8ccadf', backgroundColor: '#eef7ff' } } }); In another c ...
I'm currently working on incorporating a search filter into my web application. After reading some informative articles and exploring various Jsfiddles, I've attempted to enable searching by TypeName to display the corresponding row with that spe ...
When using a component menu, each item is displayed independently. However, I would like the open items to close automatically when I click on another item with the menu. I employ a toggle functionality on click to control the opening and closing of the c ...
In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a se ...
My app allows users to create different lists, with the ability to edit the name. However, I am facing an issue where if a user types a new name, it should remain on only one line. I tried adding max height and overflow hidden properties, but it only hides ...
Currently, I have implemented checkboxes that serve as search filters on a website. Every time a user checks a filter box, an ajax request is triggered to fetch data from the server and display it. The issue arises when users select multiple checkboxes in ...
I am working with a family tree that includes dropdown menus containing the names of parents and children. Each child has a link, and when I click on a child's link, I want their father to be displayed in the dropdown menu as the selected option. Can ...
I'm looking to display a datepicker only when a button is clicked <input type="button" id=day value="day" /> $("#day").datepicker(); The code above will populate the button text with the selected date I also attempted the following code, but ...
I'm struggling to position two images in different sections of a grid layout without overlapping them. I've attempted referencing the images by both their class and id, but they continue to occupy the same grid space. Referencing the images by ...