Highcharts is not effectively adapting to the responsiveness of all series in the chart

Question

Highcharts is not effectively adapting to the responsiveness of all series in the chart

I'm currently working on a responsive chart that features a dynamic text box positioned next to the chart itself. This text box updates with new information each time I hover over data points on the chart.

Interestingly, the text box functions perfectly on smaller screens when hovering over the first data set. However, it fails to update or display properly when hovering over the second and third sets of data.

If you'd like to see for yourself, check out this live demo: http://jsfiddle.net/b0u10ndw/

Below is the code snippet responsible for the responsive behavior:

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                },
                series: { point: {  events: { mouseOver: function ()    {
                                 var chart = this.series.chart;
                                if (!chart.lbl) {
                                chart.lbl = chart.renderer.label('')
                                .add();
                                }
                                chart.lbl
                                    .show()
                                    .css({ width: '80' })
                                    .attr({ text: 'this is the text and I have to make it really long so that it goes for multiple lines' });
                                        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {
                                                align: 'right',
                                                x: 0, // offset
                                                verticalAlign: 'top',
                                                y: 50 // offset
                                                }), null, 'spacingBox');
                                }

                    } } },

To observe the issue in action, simply resize the chart to a smaller size and hover over each bar one by one.

Although I attempted to set the width of the text box as a percentage, it appears that only pixel units are being accepted at this time.

jquery css highcharts textbox responsive

Answer 1

Answer №1

The chart is functioning correctly as per the provided documentation.

An interesting scenario involves configuration objects that accept arrays, such as xAxis, yAxis, or series. In these cases, an id option is utilized to link the new set of options with an existing object. If no existing object with the same id is found, the first item is updated instead. For instance, if you set chartOptions with a series item lacking an id, it will result in updating the chart's initial series.

refer to: responsive.rules

The resolution (Sergiu's solution also works) involves defining events within the plotOptions.column object.

 plotOptions: {
        column: {
          point: {
            events: {
              mouseOver: function() {
                ...
              }
            }
          }
        }
      },

example: http://jsfiddle.net/b0u10ndw/1/

I specified options in plotOptions.column instead of plotOptions.series (which seemed more logical), but this choice resulted in an error (reported bug here).

For Sergiu's example on allowPointSelect - it is necessary to link the series using ids:

In chart options:

series: [{
        name: 'Christmas Eve',
        data: [1, 4, 3],
        id: 's1'
    }, {
        name: 'Christmas Day before dinner',
        data: [6, 4, 2],
        id: 's2'
    }, {
        name: 'Christmas Day after dinner',
        data: [8, 4, 3],
        id: 's3'
    }],

In responsive rules:

 series:[{
                        allowPointSelect:true,
                      id: 's1'
                    }, {
                        allowPointSelect:true,
                      id: 's2'
                    }, {
                        allowPointSelect:true,
                      id: 's3'

example: http://jsfiddle.net/hsd19y0y/3/

Answer 2

The chart is functioning correctly as per the provided documentation.

An interesting scenario involves configuration objects that accept arrays, such as xAxis, yAxis, or series. In these cases, an id option is utilized to link the new set of options with an existing object. If no existing object with the same id is found, the first item is updated instead. For instance, if you set chartOptions with a series item lacking an id, it will result in updating the chart's initial series.

refer to: responsive.rules

The resolution (Sergiu's solution also works) involves defining events within the plotOptions.column object.

 plotOptions: {
        column: {
          point: {
            events: {
              mouseOver: function() {
                ...
              }
            }
          }
        }
      },

example: http://jsfiddle.net/b0u10ndw/1/

I specified options in plotOptions.column instead of plotOptions.series (which seemed more logical), but this choice resulted in an error (reported bug here).

For Sergiu's example on allowPointSelect - it is necessary to link the series using ids:

In chart options:

series: [{
        name: 'Christmas Eve',
        data: [1, 4, 3],
        id: 's1'
    }, {
        name: 'Christmas Day before dinner',
        data: [6, 4, 2],
        id: 's2'
    }, {
        name: 'Christmas Day after dinner',
        data: [8, 4, 3],
        id: 's3'
    }],

In responsive rules:

 series:[{
                        allowPointSelect:true,
                      id: 's1'
                    }, {
                        allowPointSelect:true,
                      id: 's2'
                    }, {
                        allowPointSelect:true,
                      id: 's3'

example: http://jsfiddle.net/hsd19y0y/3/

Answer 3

Answer №2

It seems that the series object override may not be fully supported. I conducted a test using the responsive demo on Highcharts and encountered similar issues when attempting to override a simple property for the series object. Here is the link to the test

Upon resizing the chart, the allowPointSelect property was only overridden for the first column in each group, as demonstrated in the provided demo.

A similar behavior was observed in your example as well. By setting different texts for the normal mouseOver event and the one specified in the responsive object, it became evident that the responsive declaration event would only trigger for the first column in each group. You can view this here: http://jsfiddle.net/kokup8sx/

To achieve the desired outcome, consider modifying the main mouseOver event handler to execute different actions based on this property:

chart.chartWidth

One possible approach could involve:

mouseOver: function () {
    var chart = this.series.chart;
    if (!chart.lbl) {
        chart.lbl = chart.renderer.label('').add();
    }

    if (chart.chartWidth < 500) {
        chart.lbl.show().css({ width: '80' }).attr({ text: 's-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right', x: 0, verticalAlign: 'top', y: 50}), null, 'spacingBox');
    } else {
        chart.lbl.show().css({ width: '180' }).attr({ text: 'l-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right', x: 0, verticalAlign: 'top', y: 50}), null, 'spacingBox');
    }
}

Answer 4

It seems that the series object override may not be fully supported. I conducted a test using the responsive demo on Highcharts and encountered similar issues when attempting to override a simple property for the series object. Here is the link to the test

Upon resizing the chart, the allowPointSelect property was only overridden for the first column in each group, as demonstrated in the provided demo.

A similar behavior was observed in your example as well. By setting different texts for the normal mouseOver event and the one specified in the responsive object, it became evident that the responsive declaration event would only trigger for the first column in each group. You can view this here: http://jsfiddle.net/kokup8sx/

To achieve the desired outcome, consider modifying the main mouseOver event handler to execute different actions based on this property:

chart.chartWidth

One possible approach could involve:

mouseOver: function () {
    var chart = this.series.chart;
    if (!chart.lbl) {
        chart.lbl = chart.renderer.label('').add();
    }

    if (chart.chartWidth < 500) {
        chart.lbl.show().css({ width: '80' }).attr({ text: 's-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right', x: 0, verticalAlign: 'top', y: 50}), null, 'spacingBox');
    } else {
        chart.lbl.show().css({ width: '180' }).attr({ text: 'l-this is the text and I have to make it really long so that it goes for multiple lines' });
        chart.lbl.align(Highcharts.extend(chart.lbl.getBBox(), {align: 'right', x: 0, verticalAlign: 'top', y: 50}), null, 'spacingBox');
    }
}

Highcharts is not effectively adapting to the responsiveness of all series in the chart

Answer №1

Answer №2

Similar questions

Looking to tilt text at an angle inside a box? CSS can help achieve that effect!

Unlock the lightbox and send the user to the parent page

Ways to create a gradual movement for a div upon toggling a class

JQuery fixed div bounces unpredictably when scrolling

Addressing the issue of missing data in JSON documents

I have a question regarding the CSS universal selector

Updating website links in real time with the power of jquery

Send submitted form field arrays to the database

Obtain text content from a disabled textbox with Selenium

Struggling to make changes to a Styled Component in a React application

A margin is set on a div element that occupies 100% width and 100% height, nestled within another div element also occupying 100% width and

Do AJAX-inserted elements cause a delay in the loading of the DOM? How is the loading of the DOM determined

disable event listeners on the DOM

The height attribute is not functioning properly in Mozilla Firefox

Is there a way in CSS to apply multiple colors to individual letters within a word?

What is the best way to adjust the size of carousel images within a box element?

Tips for retaining the hashed links' rel attribute when the page refreshes

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

The implementation of classList.toggle in my JavaScript code is not functioning as expected

Efficiently loading images into a navigation flyout: the ultimate guide