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:

https://i.sstatic.net/ndalp.png

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/

https://i.sstatic.net/nwMgy.png

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/

https://i.sstatic.net/nwMgy.png

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

Display images with sequential animation and a delay, combining fade-in and slide-up effects

Utilizing the power of Angular 4 in combination with mailgun

Trouble with defining variables in EJS

Iterate over asynchronous calls

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

A custom JavaScript function designed to replicate Excel's functionality of dividing numbers by thousands

What is the best way to restrict event handling to only occur once every X seconds using jQuery or JavaScript?

What sets apart "config" from "defaults" in Sencha Touch?

Utilizing a function as a value in React state (setState) compared to defining state with constructor in a class and utilizing a state object

Interactive World Map with Fluid Motion Animation built using HTML, CSS, and JavaScript

Is there a way to determine the duration that a click was held down for?

What is preventing me from using Selenium/Javascript to control Firefox on Ubuntu 22.04, when I am able to do so with Python?

Getting the selected item from a dropdown menu and including it in an email

Utilizing NextJS Image Component in Conjunction with Auth0

What is the best way to retrieve dates from a MySQL database using ExpressJS?

The flickering problem with HTML5 DOM

Exploring ways to pass props in functional components in React Native

Inability to input text into a textbox with AngularJS

Fundamentals of object property in jQuery and Javascript

Button component in React remains visible until interacted with