Question 73128 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to have different cursors on different bar groups of column chart in Highcharts? – Reactjs

enter image description here

Here on the Total bars i want to have default cursor but on tires bars i want to have cursor: pointer.

Is there a way to do that programatically not using css? Because there can be 100s of column groups.

Tags:

2

Answers


  1. 0

    Why wouldn’t you use CSS?

    const colors = ['#648DE6', '#BBA8F6', '#19DCEA'];

document.addEventListener('DOMContentLoaded', function() {
  const chart = Highcharts.chart('container', {
    chart: {
      type: 'column',
    },
    plotOptions: {
      column: {
        borderRadius: 8
      }
    },
    colors: colors,
    title: {
      text: 'Car Parts'
    },
    xAxis: {
      categories: ['Total', 'Tires']
    },
    yAxis: {
      title: {
        text: 'Cost'
      }
    },
    series: [{
      name: 'One',
      data: [8, 9],
      color: colors[0]
    }, {
      name: 'Two',
      data: [1, 6],
      color: colors[1]
    }, {
      name: 'Three',
      data: [11, 5],
      color: colors[2]
    }]
  });
});
    .highcharts-series-group .highcharts-series .highcharts-point:nth-child(2) {
  cursor: pointer;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/css/highcharts.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.min.js"></script>
<div id="container" style="width:100%; height:400px;"></div>

    If you want to make this dynamic, you could use JavaScript.

    const colors = ['#648DE6', '#BBA8F6', '#19DCEA'];

function setCursorForChart(chart, seriesLabel) {
  const categoryIndex = [...chart.container
      .querySelectorAll('.highcharts-xaxis-labels text')]
    .map(textEl => textEl.textContent).findIndex(text => text === seriesLabel);
    
  document.querySelectorAll('.highcharts-series-group .highcharts-series')
    .forEach((series) => {
      series.querySelectorAll('.highcharts-point')
        .forEach((point, index) => {
          if (index === categoryIndex) {
            point.style.cursor = 'pointer';
          }
        });
    })
}

document.addEventListener('DOMContentLoaded', function() {
  const chart = Highcharts.chart('container', {
    chart: {
      type: 'column',
    },
    plotOptions: {
      column: {
        borderRadius: 8
      }
    },
    colors: colors,
    title: {
      text: 'Car Parts'
    },
    xAxis: {
      categories: ['Total', 'Tires']
    },
    yAxis: {
      title: {
        text: 'Cost'
      }
    },
    series: [{
      name: 'One',
      data: [8, 9],
      color: colors[0]
    }, {
      name: 'Two',
      data: [1, 6],
      color: colors[1]
    }, {
      name: 'Three',
      data: [11, 5],
      color: colors[2]
    }]
  });

  setCursorForChart(chart, 'Tires'); // Pass in the chart ref
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/css/highcharts.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/10.3.3/highcharts.min.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
    Login or Signup to reply.
  2. 0

    You can set cursor style for points with a specific x value. For example:

    chart.series.forEach(s => {
  s.points.forEach(point => {
    if (point.x === 1) {
      point.graphic.css({
        cursor: 'pointer'
      });
    }
  });
});

    Live demo: http://jsfiddle.net/BlackLabel/vw06d5yL/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search