Display the range of x values in the tooltip on a Highcharts column chart histogram

I am utilizing the highcharts column chart to generate a histogram. Due to using pre-aggregated data, I cannot use the histogram chart type. How can I set up the tooltip for the columns so that it displays the date range for each column instead of just the start date?

http://jsfiddle.net/3q6gxjph/8/

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Count'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y}</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    series: {
      pointInterval: 24 * 3600000, // one day
      pointStart: 0,
      pointPlacement: 'between'
    },
    column: {
      groupPadding: 0,
      pointPadding: 0
    }
  },
  series: [{
    data: [49, 71, 106, 129, 144, 176, 135, 148, 216, 194, 95, 54]

  }]
});

Answer №1

Implementing the use of tooltip.formatter enables the calculation of the range necessary for the point to appear in the tooltip.

tooltip: {
  formatter () {
    const x1 = Highcharts.dateFormat('%Y-%m-%d', this.x)
    const x2 = Highcharts.dateFormat('%Y-%m-%d', this.x + 24 * 3600 * 1000)
    const header = `<span style="font-size:10px">${x1} - ${x2}</span><table>`

    const body = `<tr>
      <td style="color:${this.series.color};padding:0">${this.series.name}: </td>
      <td style="padding:0"><b>${this.y}</b></td>
    </tr>`

    const footer = '</table>'

    return header + body + footer
  },

To see a live demonstration, visit: http://jsfiddle.net/3a6m49aj/

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

Preventing Users from Accessing a PHP Page: Best Practices

I'm currently focusing on a problem that involves restricting a user from opening a PHP page. The following is my JavaScript code: <script> $('input[id=f1email1]').on('blur', function(){ var k = $('inp ...

Populating a form within an Angular.js application using PhantomJS

Looking to test an AngularJS application using PhantomJS? The first step is to fill in the login form with the username field, assuming there are no other fields involved. Typically, in a real browser, this field is managed by Angular (with the ng-model ...

What is the method for extracting the href attribute from an <a class using Python Selenium?

I am attempting to extract a href from a webpage using selenium. When I utilize the browser console with this javascript command, I successfully get the desired href: document.getElementsByClassName('item-panel__title')[0].getAttribute('href ...

Is your FontAwesome icon appearing oversized?

While working on , I noticed a discrepancy in the header design compared to . The elements "#navigation ul.nav > li a" seem to be wider on the former site than on the latter, despite my efforts to replicate the styles precisely. Upon further inspectio ...

Swap out the div block with a new one

I am currently facing an issue with my JavaScript code. The code is supposed to remove block1 and replace it with block2 when an onclick function is triggered. function buyerclick() { div = document.getElementById('block2'); div.style.displa ...

Vue.js component mismatch in the layout

Attempting to set up a Vue application with vuetify while incorporating layouts. As a newcomer to Vue, I may have made some beginner errors. Here is the structure of my app: main.js // The Vue build version to load with the `import` command // (runtime- ...

Creating a mesmerizing display of moving cubes using three.js

I am attempting to reproduce a specific effect showcased in the following link: In my current project, I have multiple cubes positioned in 3D space along the x and z axis with loops. However, I am struggling to animate them in a precise order. My idea is ...

Incorporating an Angular 2 Directive within the body tag of an

My goal is to create a custom directive that can dynamically add or remove a class from the body element in HTML. The directive needs to be controlled by a service, as I want to manage the visibility of the class from various components. Question: How ca ...

What is the best way to align dynamically generated divs seamlessly together?

After creating a function that generates a grid of divs placed in a container div upon document load or user reset, I noticed a gap between each row of divs. I aim for a flawless grid where each square aligns perfectly with the next. Despite trying vario ...

I would like to know how to create a dropdown menu that shows the country name, flag, and code based on the

I have successfully generated the telephone input field. One requirement is to display the Country flag along with the country name as soon as the dropdown is selected. Another requirement is that once the country is selected, it should display the countr ...

Guide to accessing and updating data in various tabs within a Google spreadsheet

I have two tabs named TAB A and TAB B. My goal is to iterate through TAB A and extract a set of values that I can then paste into TAB B. However, I encountered an error message saying, "Cannot read property 1, etc" function getValuesFromModal(form) { ...

Troubleshooting: GSAP Scrolltrigger malfunctions when using multiple triggers

Having multiple triggers with different functionalities: Show or remove a canvas Change the background color of a section Play or pause video when in view Play or pause CSS animation The first two triggers work fine individually, but I am encountering an ...

jQuery functions failing to target dynamically generated elements

I've encountered an issue while attempting to implement my jQuery functions on dynamically created content using the .on API from jQuery. The main objective of the code is to display a specific set of options only when a user hovers over the ".feed_po ...

Using JavaScript Arrays to Make Labels in Chart.js

I am currently working with Chart.js and have a JavaScript array containing values that look like this: var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}'); I am passing the "obj" array to my Chart.js, filling out the ...

Utilize the string module from a JavaScript file in your React or Next.js project

Within my project structure, I have a file named "test.js" located in the "/constants" directory. The content of this file is as follows: const test = "test!" export default test In another part of my project, specifically within the "/pages" folder, I w ...

Is there a way to prevent Angular component lifecycle hooks like ngOnInit/ngOnDestroy from being triggered when nested within one another?

I am currently developing an application with a page structure that resembles the following: Displaying Objects retrieved from Firestore (similar to Instagram posts) Loading Comments (using the object's id to display comments sub-collection) Load ...

Utilize Meteor-tabular to effortlessly export data with convenient HTML5 export buttons

Currently, I am utilizing the tabular package to display data from a collection in a table format. However, when attempting to export the data using html5 export buttons with the button (csvhtml5), only the length of data visible in the table is exported, ...

React Form with Conditional Input Options and Validation

Just diving into the world of React, I find myself connecting a React frontend to a Flask backend in a group project. Surprisingly, I've ended up handling about 90% of the workload. While I have utilized MUI for implementing fields, my focus is more o ...

Error: The nested arrow function in React is not defined

Oops, here we go again. I'm attempting to craft an arrow function that will present some data, while also trying to nest a SECOND arrow function within the first in order to organize some of the information into a list - but it seems like I've h ...

How to Retrieve Component HTML Output in Vue beyond the Template Tag?

Is there a way to access the output of a component, such as ComponentName, outside of the template in Vue.js? For example, in data, methods, or during the mounted lifecycle hook. For instance, consider a Vue file named components/Test.vue: <template&g ...