CODEWITHSUNDEEP
angularhighchartshighcharts-ngangular-highcharts
Usha
Usha

Reputation: 13

Regarding SMA and Volume by price highcharts in angular application

I want to change the pointWidth(increase the width of each column represented as volume data in y-axis) for Volume in y-axis depending on the zoom level. In SMA the default zoom levels are 1month, 3 months,6 months, YTD and 1 year. I want the pointWidth for the volume data present in y-axis to be different for different zoom levels like when user clicks on 1 month the pointWidth should be 9, for 3 months the pointWidth should be 7, for 6 months the pointWidth should be 5 and for YTD the pointWidth should be 6 and for 1 year the pointWidth should be 2 for SMA and Volume by price highcharts graph. (Note: I have not explicitly mentioned the zoom levels 1m,3m,6m,YTD,1y,ALL and it is taken by default and I want it to consider it by default because of other functionalities implemented and I don't want to include groupingUnits). Code:

 plotOptions: {
      series: {
        dataGrouping: {
           enabled: false,
        }
    },
      column: {
        pointPadding: 0,
        groupPadding: 0,
        borderWidth: 0,
        shadow: false,
        pointWidth: 3, 
    },

    },
    series: [{
        type: 'candlestick',
        name: 'CAST',
        id: 'cast',
        zIndex: 2,
        data: ohlc
    }, {
        type: 'column',
        name: 'Volume',
        id: 'volume',
        data: volume,
        yAxis: 1,  
        threshold: null ,
        pointRange: 1,
        pointWidth: 5
    }


Please let me know what should be included to obtain that functionality(different pointWidths for the volume in y-axis for different zoom levels) in my SMA and Volume by price highcharts . Note: I'm using this in typescript(angular).

Upvotes: -1

Views: 107

Answers (1)

jedrzejruta
jedrzejruta

Reputation: 546

You can create your own rangeSelector.buttons object array and subscribe to the click event, there you can update chart properties (e.g. pointWidth) by calling chart.update() method.

Demo: https://jsfiddle.net/BlackLabel/53k8fLx4/

API:
https://api.highcharts.com/highstock/rangeSelector.buttons https://api.highcharts.com/highstock/rangeSelector.buttons.events.click

Upvotes: 0

Related Questions