CODEWITHSUNDEEP
javascripthighcharts
Roel Jansen
Roel Jansen

Reputation: 376

Highcharts click on column (not bar)

I have a Highcharts chart like this: http://jsfiddle.net/tasrgpqL/

In 'plotOptions' I have added a click event which triggers an alert when one of the bars is clicked. But now I want to add a click event for the entire column, not just the bars. How can I do this?

plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            point:{
              events:{
                click: function(event) {
                  alert('test');
                }
              }
            }
        },

    },

Upvotes: 1

Views: 2086

Answers (2)

Roel Jansen
Roel Jansen

Reputation: 376

To get the data of the clicked column, I used PHP like this:

// Convert PHP array to JSON object
var subjects = <?php echo json_encode($subjects); ?>

$('#chart').highcharts({
    chart: {
        events:{
            click: function(event) {
                // Get clicked column by looking for rounded click posistion of x-axis in JSON object
                var column = Math.abs(Math.round(event.xAxis[0].value));
                var id = subjects[column];
            }
        }
    },
    xAxis: {
        categories: [
            // Create JSON by looping through array
            <?php foreach($subjects as $subject): ?>
                {name: '<?=$subject['name']?>', y: 1, id: <?=$subject['id']?>},
            <?php endforeach; ?>
        ]
    }
});

I know it's a bit ugly, but I haven't found another way yet.

Upvotes: 1

Amit Singh
Amit Singh

Reputation: 2275

You need to add the click event inside chart options:

 chart: {
    events: {
       click: function (event) {
          alert("clicked column");
       }
    },

Here's the FIDDLE

Upvotes: 2

Related Questions