2023-09-07

Prevent highcharts custom symbol marker disappear

I have a highchart heatmap chart and I want to apply a custom symbol only for some points in my data series. I don't want to have separated data series. I have only one data series and I want to apply a custom svg marker symbol that I created on a specific point.

I was able to create that symbol and apply it on my point. The problem is that when I hover off the point, my custom symbol disappears.

I already tried to disable the hover state on the marker but it still disappears when I hover off the point.

The last attempt I made was to apply the same symbol on the hover effect of marker.

Here is the JSFIddle of that attempt: https://jsfiddle.net/zvyxrhj4/8/

Highcharts.SVGRenderer.prototype.symbols.customSymbol = function (x, y, width, height, point) {
    // Your custom symbol drawing logic here
    // Return an SVG path string or SVG element
    const x_svg = ['M', x, y, 'L', x + width, y + height, 'M', x + width, y, 'L', x, y + height]
    const square_svg = ['M', x, y, 'L', x + width, y, 'L', x + width, y + height, 'L', x, y + height, 'L', x, y]
    let final_svg = []
    
        point.lineColor = 'red';
    final_svg.push(square_svg)
    final_svg.push(x_svg)
      
    return final_svg
};

// Substring template helper for the responsive labels
Highcharts.Templating.helpers.substr = (s, from, length) =>
    s.substr(from, length);

// Create the chart
Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Sales per employee per weekday',
        style: {
            fontSize: '1em'
        }
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas',
            'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null,
        reversed: true
    },


    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        borderColor: 'black',
        data: [
            [0, 0, 19],
          {
            x: 0,
            y: 1,
            value: 10,
            marker: {
                symbol: 'customSymbol',
              states: {
                hover: {
                    enabled: true,
                  symbol: 'customSymbol'
                }
              }
            }
          },
          [1, 0, 92],
          [1, 1, 58]
        ],
        dataLabels: {
          enabled: true,
          color: '#000000'
        },
    }],

});


No comments:

Post a Comment