The tooltip chart is not displaying all of its data

Question

The tooltip chart is not displaying all of its data

I create a dynamic tooltip with a custom chart inside of it.

tooltip: {
    borderRadius: 15,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none',
    useHTML: true,
    shared: true,
    formatter: function() {
        var div = document.createElement('div');

        Highcharts.chart(div, {
            chart: {
                height: 300,
                width: 300
            },
            title: {
                text: 'Custom Chart Title'
            },
            series: [
                {
                    data: [10, 20],
                    color: 'red'
                },
                {
                    data: [20, 10],
                    color: 'green'
                }
            ],
            yAxis: {
                title: {
                    text: 'Quantity'
                }
            }
        });

        return div.innerHTML;
    }
}

Illustrative Data Visualizations

The primary chart is displayed in the form of a line. The tooltip chart, on the other hand, is visualized as a column.

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

Fictitious Data Visualization

In this scenario, both the main chart and the tooltip chart are represented as line charts. Some symbols may appear partially hidden due to an unknown obstruction or rendering issue.

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

Any insights on how to resolve this challenge?

Status Update 1

The elements containing the series have been identified, rendered correctly, but remain hidden from view despite efforts to bring them forward using CSS.

 <g class="highcharts-series-group" data-z-index="3">...</g>

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

Need suggestions on how to make them visible.

Status Update 2

Tried adjusting dimensions using different methods without success:

div.style.width = "500px";

and

chart: {
    height: 300,
    width: 300
}

but no progress was made.

Status Update 3

Created a jsfiddle for reference. Feedback appreciated.

Open to any ideas or solutions. Your input is valuable.

javascript highcharts

Answer 1

Answer №1

If you're facing an issue with the interactive chart not displaying correctly, there's a simple solution. In the formatter callback function, make sure you are returning an innerHTML of a div with the correct chart content.

To fix the hidden chart plot area due to animation, simply disable it by adding the following code:

plotOptions: {
  series: {
    animation: false
  }
}

See demo here:

https://jsfiddle.net/BlackLabel/us4dvgy9/

Alternatively, you can return an HTML div element in the tooltip formatter and then create a chart inside the div using setTimeout for proper animation functionality.

Sample code snippet:

formatter: function() {

  setTimeout(function() {
    Highcharts.chart('tooltip', {
      chart: {
        width: 200,
        height: 200,
        type: 'column'
      },
      title: {
        text: 'Title'
      },
      credits: {
        enabled: false
      },
      series: [{
        data: [50, 75],
        color: 'red',
        selected: true
      }, {
        data: [10, 100],
        color: 'green'
      }],
      yAxis: {
        title: {
          text: 'Quantity'
        }
      }
    });
  }, 0);

  return '<div id="tooltip"></div>';
}

View working demo:

https://jsfiddle.net/BlackLabel/rh6pw5s2/

Answer 2

If you're facing an issue with the interactive chart not displaying correctly, there's a simple solution. In the formatter callback function, make sure you are returning an innerHTML of a div with the correct chart content.

To fix the hidden chart plot area due to animation, simply disable it by adding the following code:

plotOptions: {
  series: {
    animation: false
  }
}

See demo here:

https://jsfiddle.net/BlackLabel/us4dvgy9/

Alternatively, you can return an HTML div element in the tooltip formatter and then create a chart inside the div using setTimeout for proper animation functionality.

Sample code snippet:

formatter: function() {

  setTimeout(function() {
    Highcharts.chart('tooltip', {
      chart: {
        width: 200,
        height: 200,
        type: 'column'
      },
      title: {
        text: 'Title'
      },
      credits: {
        enabled: false
      },
      series: [{
        data: [50, 75],
        color: 'red',
        selected: true
      }, {
        data: [10, 100],
        color: 'green'
      }],
      yAxis: {
        title: {
          text: 'Quantity'
        }
      }
    });
  }, 0);

  return '<div id="tooltip"></div>';
}

View working demo:

https://jsfiddle.net/BlackLabel/rh6pw5s2/

The tooltip chart is not displaying all of its data

Illustrative Data Visualizations

Fictitious Data Visualization

Status Update 1

Status Update 2

Status Update 3

Answer №1

Similar questions

Recursive sorting and parsing of JSON data with multiple levels

HTML/JavaScript: Embrace the Power of Dynamic Page

Retrieve user information from Auth0 once the user has completed the signup process

The Checkbox generated by Javascript is failing to properly close the tag

using an external JavaScript function in the MongoDB shell

How can you add an error notification to a click on a protractor?

Working with jQuery, CSS, and functions to modify the current tag's class

Toggle between bold and original font styles with Javascript buttons

Encountering obstacles when attempting to save form information to a MongoDB database using Node.js

The Express middleware is not being utilized

How can I prevent an endless loop in jQuery?

Tips for displaying an edit icon on an individual row item when it is hovered

Whenever I attempt to trim my integer within a for loop, my browser consistently becomes unresponsive and freezes

Organize the table data based on time

Instructions on how to include a conditional click attribute to a hyperlink

Creating a blueprint for my AJAX setup to effectively incorporate a callback function

What is the best way to emphasize a specific data point within a chart created with chartjs, especially when the data is sourced from a JSON

What is the best way to include the Mailchimp integration script in the `Head` of a Next.js project without causing any pre

ng-repeat to prevent duplicate items from displaying

The onLayoutChange function keeps overwriting the data stored in my local storage