Personalize Tooltip on Highchart Area Chart

Question

Personalize Tooltip on Highchart Area Chart

I am currently in the process of customizing the tooltip for my area chart using Highchart.

Within this area chart, I have plotted 3 series. My goal is to display the tooltip at a fixed location on the chart's top center. When hovering over any point, the tooltip should reveal all series names and their corresponding values. Refer to the image below:

Presently, while I am able to position the tooltip at the top-center and it does display the current series name and data upon cursor placement, it shows the current series name repetitively in all three places.

Below are the Highchart options configured:

Insert HighCharts configuration here...

This is what I've attempted so far: https://jsfiddle.net/2pdossk7/13/

I would greatly appreciate any assistance. Thank you in advance!

javascript charts highcharts

Answer 1

Answer №1

To achieve the desired outcome, utilizing tooltip.formatter is crucial.

Below is a guide on creating tooltip text using a formatter:

  formatter: function(tooltip) {
    const points = this.points;
    let str = '<table><tr>';

    points.forEach(point => {
      str += '<td style="text-align:center">' + point.y + '</td>';
    });

    str += '</tr><tr>';

    points.forEach(point => {
      str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
    });

    str += '</tr></table>';

    return str;
  },

In addition, position it at the center of the chart with the following code:

  positioner: function () {
    const chart = this.chart;

    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
  }

Here's an example along with the output:

https://jsfiddle.net/eb3ou25v/

Answer 2

To achieve the desired outcome, utilizing tooltip.formatter is crucial.

Below is a guide on creating tooltip text using a formatter:

  formatter: function(tooltip) {
    const points = this.points;
    let str = '<table><tr>';

    points.forEach(point => {
      str += '<td style="text-align:center">' + point.y + '</td>';
    });

    str += '</tr><tr>';

    points.forEach(point => {
      str += '<td><span style="font-size:20px;color:' + point.color + '">●</span> ' + point.series.name + '</td>';
    });

    str += '</tr></table>';

    return str;
  },

In addition, position it at the center of the chart with the following code:

  positioner: function () {
    const chart = this.chart;

    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop + 10 };
  }

Here's an example along with the output:

https://jsfiddle.net/eb3ou25v/

Answer 3

Answer №2

To achieve the desired outcome, utilize the pointFormat method.
Here is an example of how to implement this:

pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
  '<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',

positioner: function () {
    const chart = this.chart;        
    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
  }

For a demonstration using jsfiddle, visit this link

Answer 4

To achieve the desired outcome, utilize the pointFormat method.
Here is an example of how to implement this:

pointFormat: '<table style="text-align:center; display: inline-block; background: white;"><tr><td>{point.y}</td></tr>' +
  '<tr><td><span style="font-size:20px;color:{series.color}">●</span> {series.name}</td></tr></table>',

positioner: function () {
    const chart = this.chart;        
    return { x: (chart.plotWidth + chart.marginRight - this.label.getBBox().width) / 2, y: chart.plotTop - 20 };
  }

For a demonstration using jsfiddle, visit this link

Personalize Tooltip on Highchart Area Chart

Answer №1

Here's an example along with the output:

Answer №2

Similar questions

`Is there a way to effectively test an @Input component in Angular?`

JavaScript Transcriber

Error encountered: When implementing mergeImages in express.js, a ReferenceError occurs stating that the window is not

I continue to encounter the error "Unexpected token b in JSON at position 0" when attempting to parse JSON data

Conceal the year, month, and day within a datetime-local input

What is the appropriate time to end a connection in MongoDB?

implementing a search filter using a search bar with JavaScript, inside a Laravel Blade or HTML file

Here's the step-by-step process: Access the specific item in the object by referencing `obj[i]["name of desired attribute"]

Discover the best method for summing all values within a JSON object that contains multiple unique keys

What is the best way to capture a screenshot of a website using its URL?

Utilizing a Static Image Path Prop in React JS: A Step-by-Step Guide

Prevent duplicating ReactJs when using Gulp: A guide

It appears that protractor-flake is programmed to re-run all tests instead of just the ones that have failed

Implement admin-on-rest framework within my current project

Implement an onClick event to the newly created th element using document.createElement()

Transforming an array of JavaScript objects into arrays of key-value pairs based on a specific property with ES6 syntax

What is the best way to obtain the attribute value when a user clicks on a child element?

The AjaxPoller object is not defined and causing a TypeError

JavaScript redirecting without refreshing the page

Verifying username using an Ajax call