Skip to content
Custom events plugin for Highcharts by Black Label
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
docs
js Fixed #135, double click was wrong propagated on touch devices. Mar 29, 2019
.eslint-default-config.yml
.eslintrc Closed #49 Jun 15, 2016
README.md
bower.json
gulpfile.js
index.html Merge pull request #21 from tisba/patch-1 Nov 13, 2018
jsdoc.json v2 - rebuild and refactored / dev docs Sep 19, 2016
license.txt
manifest.json
package.json

README.md

Custom events - Highcharts module

Go to project page to see this module in action: http://blacklabel.github.io/custom_events/

Requirements

  • Plugin requires the latest Highcharts (tested with 3.0.7)

Installation

  • Like any other Highcharts module (e.g. exporting), add <script> tag pointing to custom_events.js below Highcharts script tag.

  • For NPM users:

var Highcharts = require('highcharts'),
    HighchartsCustomEvents = require('highcharts-custom-events')(Highcharts);
  • For BOWER users:
bower install highcharts-custom-events

Code

The latest code is available on github: https://github.com/blacklabel/custom_events/

Usage and demos

It's quite simple and intuitive, just pass function as other events:

events: {
                        dblclick: function () {
                            $('#report').html('dbclick on xAxis label');
                        },
                        click: function () {
                            $('#report').html('click on xAxis label');
                        },
                        contextmenu: function () {
                            $('#report').html('context menu on xAxis label');
                        }
}

Crosshairs

crosshair: {
    enabled: true,
    events: {
                        dblclick: function () {
                            $('#report').html('dbclick on xAxis label');
                        },
                        click: function () {
                            $('#report').html('click on xAxis label');
                        },
                        contextmenu: function () {
                            $('#report').html('context menu on xAxis label');
                        }
    }
}

Available events

  • click
  • double click (including mobile devices)
  • right click (context menu)
  • mouse over
  • mouse out
  • mouse down
  • mouse move

Elements

  • title
  • subtitle
  • axis labels
  • axis title
  • plotLines
  • plotBands, including labels
  • point
  • series
  • legend
  • datalabels
  • flags
  • crosshairs
You can’t perform that action at this time.