Setting the z-index for data points in a scatter plot on HighCharts

Question

Setting the z-index for data points in a scatter plot on HighCharts

Utilizing HighCharts to display a large number of points on a plot. Each point has an opacity setting and changes to red when selected. However, some points are difficult to distinguish due to overlapping.

I would like the selected point to be easily visible, similar to this:

To select points on the chart, I am using the following code snippet:

updateChart = function(x){

    for (i=0; i<chart.series[0].data.length; i++){

        if(chart.series[0].data[i].config[2] == x){       
            chart.series[0].data[i].graphic.attr({'fill':'red', 'z-index':1000})
        }
        else{
            chart.series[0].data[i].graphic.attr('fill', 'rgba(0,255,0,0.6)')
        }        
    }
}

I have attempted to set a z-index value for the point, however, it seems ineffective (I also tried 'z-index':'1000'). Is there another approach that can ensure the highlighted point is displayed above all other points?

javascript charts highcharts

Answer 1

Answer №1

UPDATE updated for the year 2014

This question may be old, but I wanted to provide an update specifically for highcharts in the year 2014. Now, you can utilize the convenient built-in function Element.toFront() that automatically brings elements to the front by popping and re-appending them to the top.

For instance, if you want to move a point at index i within your data, you can simply use the following code:

chart.series[0].data[i].graphic.toFront()

That's all there is to it!

Check out the API source for more information

Answer 2

UPDATE updated for the year 2014

This question may be old, but I wanted to provide an update specifically for highcharts in the year 2014. Now, you can utilize the convenient built-in function Element.toFront() that automatically brings elements to the front by popping and re-appending them to the top.

For instance, if you want to move a point at index i within your data, you can simply use the following code:

chart.series[0].data[i].graphic.toFront()

That's all there is to it!

Check out the API source for more information

Answer 3

Answer №2

Regrettably, individual points do not have a zIndex property. However, as Bubbles suggested, you can append the point at the end to make sure it is rendered last and appears on top.

Instead of iterating through all the points and directly applying styles to the element, I suggest utilizing the states:select feature of highcharts. This allows you to specify a particular style for the selected state, making it easier to highlight a specific point by triggering a select() on it.


    marker: {
        states: {
            select: {
                fillColor: '#00ff00'
            }
        }
    }

Below is an example of how you can highlight a point by moving it to the end of the series and triggering a select() on it:


function highlightPoint(point){
    // Save the point's properties into a new point object
    var newPoint = {
        x: point.x,
        y: point.y
    };
    // Remove the original point
    point.remove();
    // Add the new point at the end of the series
    chart.series[0].addPoint(newPoint);
    // Select the newly added point
    chart.series[0].points[chart.series[0].points.length - 1].select();
}

Check out the demo on jsFiddle for more details.

Answer 4

Regrettably, individual points do not have a zIndex property. However, as Bubbles suggested, you can append the point at the end to make sure it is rendered last and appears on top.

Instead of iterating through all the points and directly applying styles to the element, I suggest utilizing the states:select feature of highcharts. This allows you to specify a particular style for the selected state, making it easier to highlight a specific point by triggering a select() on it.


    marker: {
        states: {
            select: {
                fillColor: '#00ff00'
            }
        }
    }

Below is an example of how you can highlight a point by moving it to the end of the series and triggering a select() on it:


function highlightPoint(point){
    // Save the point's properties into a new point object
    var newPoint = {
        x: point.x,
        y: point.y
    };
    // Remove the original point
    point.remove();
    // Add the new point at the end of the series
    chart.series[0].addPoint(newPoint);
    // Select the newly added point
    chart.series[0].points[chart.series[0].points.length - 1].select();
}

Check out the demo on jsFiddle for more details.

Answer 5

Answer №3

Highcharts utilize SVG elements, which do not adhere to standard z-index controls. Despite this, there are still methods to manage the rendering order of elements - the last element in an SVG tree is displayed on top of all others, so by moving an element to the front you can adjust its visibility within the chart.

Answer 6

Highcharts utilize SVG elements, which do not adhere to standard z-index controls. Despite this, there are still methods to manage the rendering order of elements - the last element in an SVG tree is displayed on top of all others, so by moving an element to the front you can adjust its visibility within the chart.

Answer 7

Answer №4

One interesting aspect of the solution mentioned previously is that it didn't work for me initially. I encountered a scenario where the Tooltip point in the Area chart wasn't clickable when the areas overlapped, even though the Tooltip was visible.

I managed to resolve this issue by incorporating the provided solution into the parent group within the Tooltip formatter function.

tooltip :{
   ...
   formatter () {
        this.point.graphic.parentGroup.toFront();
        ...
   }
}

Answer 8

One interesting aspect of the solution mentioned previously is that it didn't work for me initially. I encountered a scenario where the Tooltip point in the Area chart wasn't clickable when the areas overlapped, even though the Tooltip was visible.

I managed to resolve this issue by incorporating the provided solution into the parent group within the Tooltip formatter function.

tooltip :{
   ...
   formatter () {
        this.point.graphic.parentGroup.toFront();
        ...
   }
}

Setting the z-index for data points in a scatter plot on HighCharts

Answer №1

UPDATE updated for the year 2014

Answer №2

Answer №3

Answer №4

Similar questions

Retrieval of entity through REST Endpoint using ODataSetName for Custom Entity

Is it possible to display a title tooltip only when the CSS ellipsis feature is active in a React component?

Display a delete icon when hovering over a Chip component from Material-ui

Encountering a Vue syntax error following the binding of a session variable

Is the order of execution of extraReducers before or after the reducers?

Exploring the Vanilla JavaScript alternative to the jQuery.each() function

Display the designated element upon clicking the designated link exclusively

Steps to resolve the "cannot get product" error on Heroku after submitting a value

Accessing data from an API in an AngularJS dropdown menu

When I attempt to press the shift + tab keys together, Shiftkey is activated

Check to see if a guest has shown support or followed an outside party

Remove an item from a complex JSON structure based on the specified name. The function will then return the

JavaScript function unable to access static file for image

The concept of inheriting directives/scopes

Is Selenium suitable for testing single page JavaScript applications?

Tips for making immutable state changes in React

Analyzing the HTTP status codes of various websites

Issue with Google Charts - Chart is unable to render because data table has not been defined

Using a data() object in Vue to fill out form fields efficiently

Using the `ssh2` module in Node.js without specifying a specific object