How to select or highlight the x axis border on click of Y axis label in gantt chart highchart

Question

How to select or highlight the X-Axis in the Gantt chart on click of the Y-axis label?

yAxis: {
  className: "highcharts-color-0",
  uniqueNames: true,
  title: {
    text: "Data"
  },
  labels: {
    events: {
      click: function () {
        alert("hellowww");
        const chart = this.chart;
        const axis = this.axis;
        const labelPos = this.pos;
        const tick = axis.ticks[labelPos];
        const x = chart.marginRight;
        const width = tick.slotWidth;
        const height = axis.height / axis.tickPositions.length;
        const y = axis.top + labelPos * height;

        chart.renderer
          .rect(x, y, tick.slotWidth, height)
          .attr({
            fill: "yellow",
            zIndex: 0
          })
          .add();
      }
    }
  }
}

The above code is working fine with the selection of the Y-Axis Label but I also want to highlight the selected row in X-Axis. Is there any way to achieve the same?

code pen URL https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010

score 0 · Answer 1 · answered Nov 22 '21 at 21:32

Generally, Gannt is drawn as you can see with lines and text by SVG, your requirements need customization. You can try adding a click event and changing some of the options available from Highcharts.CSSObject. Somewhere in the event I would put a background that has an exact calculated position.

chart.yAxis[0].labelGroup.element.childNodes.forEach(function(label) {
  console.log(label.style);
    
  label.style.cursor = "pointer";
  label.onclick = function(){
    label.style.fill = "green";
    alert('You clicked on '+ this.textContent);
  } 
});

Live demo: https://jsfiddle.net/BlackLabel/koyazbn3/

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

I want to highlight the selected row in X-Axis. how can achieve the same on the above-mentioned code? — Rohit Mehrotra, Nov 23 '21 at 11:54

How to select or highlight the x axis border on click of Y axis label in gantt chart highchart

1 Answers1