CODEWITHSUNDEEP
buttonhighcharts
janu25
janu25

Reputation: 37

how to add custom button on highstock/highcharts on subplot/addAxis

in highstock..specifically on volume and price chart combination. how can i add "button" on top of Volume chart..i am trying to create similar to link below.. where there is a close (X) button right most corner

http://finance.yahoo.com/echarts?s=IBM+Interactive#symbol=ibm;range=1y;compare=;indicator=bollinger+volume+macd+rsi;charttype=area;crosshair=on;ohlcvalues=0;logscale=off;source=undefined;

Upvotes: 3

Views: 13513

Answers (3)

Anjani Barnwal
Anjani Barnwal

Reputation: 1522

you can add buttons using exporting module (if you don't need to, ignore it), for example: jsfiddle url (you can check here)

exporting: {
 buttons: {
  customButton: {
    x: -350,
    y: 40,
    onclick: function() {
      alert('Clicked');
    },
    text: "button1"
  },
  custoButton: {
    x: -275,
    y: 40,
    onclick: function() {
      alert('Clicked');
    },
    text: "button2"
  },

  cusoButton: {
    x: -200,
    y: 40,
    onclick: function() {
      alert('Clicked');
    },
    text: "button3"
  },
}}

Upvotes: 0

Paweł Fus
Paweł Fus

Reputation: 45079

You can add buttons when using exporting module (if you don't need to, disable it), for example: http://jsfiddle.net/highcharts/2F4pJ/

exporting: { 
    buttons: {
        customButton: {
            x: -62,
            onclick: function () {
               alert('Clicked');
            },
            symbol: 'circle'
        }
    }
}

But still I don't see difference between positioning HTML button with left/top and position: absolute, or adding built-in button from Highcharts, where you need to use x and y to position button.

Upvotes: 5

Dominik Ehrenberg
Dominik Ehrenberg

Reputation: 1746

Actually it's possible, it's just not documented. Highcharts' SVG renderer has a "button" Method which looks like this:

button: function (text, x, y, callback, normalState, hoverState, pressedState, disabledState, shape)

Meaning you can create a button like this:

chart.renderer.button('Click me', 150, 25, myCallback)

Upvotes: 3

Related Questions