angularjshighchartsjstockchart

Is there a way to use some of the highcharts-stocktools-toolbar items?

Sample toolbar functionn needed

I am able to remove the parts of toolbar by not adding them in my directive via 

stockTools: {gui: {
enabled: true,
buttons: ['separator', 'measure', 'toggleAnnotations', 'separator', 'flags', 'separator','zoomChange', 'fullScreen', 'separator', 

/*'lines', 'crookedLines', 'simpleShapes', 'verticalLabels'*/

]

But in measure, I want only measureX, not measureY and measure XY. Is there a way to include subparts of the toolbar items rather than removing them in stock-tools.js.

Solution

  • You should be able to define signle item in stock tools definitions, but there is a bug in Highcharts, which is reported here: https://github.com/highcharts/highcharts/issues/10980

    As a workaround, you can define the first element as an empty: items: [, 'measureX']

    or create your own button, instead of removing items from the list:

    {
  ..., 
  stockTools: {
    gui: {
      buttons: ['indicators', 'separator', 'simpleShapes', 'lines', 'crookedLines', 'myMeasure', 'advanced', 'toggleAnnotations', 'separator', 'verticalLabels', 'flags', 'separator', 'zoomChange', 'fullScreen', 'typeChange', 'separator', 'currentPriceIndicator', 'saveChart'],
      definitions: {
        myMeasure: {
          className: 'highcharts-measure-x',
          symbol: 'measure-x.svg'
        }
      }
    }
  },

  navigation: {
    bindings: {
      myMeasure: Highcharts.getOptions().navigation.bindings.measureX
    }
  },
  ...
}

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

    API Reference: https://api.highcharts.com/highstock/stockTools.gui.definitions.measure.items