Search code examples
highcharts

HighCharts Histogram - overlapping item with hardcoded height

I have a very specific requirement, which can be shown as below: enter image description here

The problem is the rhombus. This is basically an own timeseries with just one value, which indicates the value of the current logged in user.

I found several ways to add custom svg (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/infographic/) and I can configure it, to have a custom height etc., but (even with the help of the awesome HighCharts ChatGPT) I can't make the following work:

  • The rhombus needs to consider a logical value (the biodiversity points of the current user), but has to overlap to the other timeseries
  • The rhombus overlaps the x-axis values, which I also couldn't make work
  • The rhombus needs to have a specific height and width, independent of the logical values -> the width is possible with the pointWidth attribute, but there is no possibility for height I see

I've also toyed around with other approaches like markers, but none of them seem to fit the bill. Does anyone have input, how one could solve the issue with the rhombus according to the HighCharts apis?

Solution

  • I think the solution you're looking for is drawing rhombus by Highcahrts.SVGRenderer. You can render it at every place on the chart and use logical values as well. Here is the basic example:

      chart: {
    type: 'column',
    events: {
      render: function() {
        const chart = this,
          renderer = chart.renderer,
          point = chart.series[0].points[2],
          rhombusSize = chart.series[0].points[2].y,
          xPos = chart.plotLeft + point.plotX - (rhombusSize / 2),
          yPos = chart.plotTop + chart.plotHeight - (rhombusSize / 2);

        if (!chart.rhombus) {
          chart.rhombus = renderer.symbol('diamond', 0, 0, rhombusSize, rhombusSize)
            .attr({
              fill: 'red',
              zIndex: 10
            })
            .add();
        }

        chart.rhombus.attr({
          x: xPos,
          y: yPos
        });
      }
    }
  },

    Demo: https://jsfiddle.net/BlackLabel/mgjLntz6/

    API References: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer