the buttons in stockTools not working after changing gui buttons string array

[leo4707]

Hi,

I want to disabled some buttons in stockTools, so i change the option to this

stockTools : {
    gui : {
        buttons: ["fullScreen"]
    }
}

but when i click the button on web, it doesn't work(the stockTools work in default setting), this is my HighchartStockComp.js

import React from 'react';
import "highcharts/css/stocktools/gui.css";
import "highcharts/css/annotations/popup.css";
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highstock'

import exporting from "highcharts/modules/exporting";
import Indicators from "highcharts/indicators/indicators-all.js";
import DragPanes from "highcharts/modules/drag-panes.js";
import AnnotationsAdvanced from "highcharts/modules/annotations-advanced.js";
import PriceIndicator from "highcharts/modules/price-indicator.js";
import FullScreen from "highcharts/modules/full-screen.js";
import StockTools from "highcharts/modules/stock-tools.js";

Indicators(Highcharts);
DragPanes(Highcharts);
AnnotationsAdvanced(Highcharts);
PriceIndicator(Highcharts);
FullScreen(Highcharts);
StockTools(Highcharts);
exporting(Highcharts);

function HighchartStockComp(props) {
    return (
        <>
            <HighchartsReact
                highcharts = { Highcharts }
                constructorType = { 'stockChart' }
                options = { props.options }
            />
        </>
    );
}

export default HighchartStockComp;

the toolbar is showing, but not work

[ppotaczek]

Hi @ueuuop8591,

Thank you for contacting us!

I've tried to reproduce the problem, but everything seems to work as expected in the below example: https://codesandbox.io/s/highcharts-react-demo-fork-8yk8qi?file=/demo.jsx

Could you add more details about the issue?

Best regards!

[leo4707]

Hi,

Below is option setting, if i do not set stockTools, it runs normally

 const options = {
        xAxis: {
            type : "datetime",
            labels : {
                format : '{value:%Y-%m}'
            }
        },
        chart : {
            height : 600
        },
        accessibility: {
            enabled : false
        },
        series: [
            {
                type : 'candlestick',
                name : 'Kline',
                data : Kline,
            },
            {
                name : PER_rate[0],
                data : data1
            },
            {
                name : PER_rate[1],
                data : data2
            },
            {
                name : PER_rate[2],
                data : data3
            },
            {
                name : PER_rate[3],
                data : data4
            },
            {
                name : PER_rate[4],
                data : data5
            }
        ],
        stockTools : {
            gui : {
                buttons: ["indicators", "fullScreen"]
            }
        }
    }

I pass the option through the props like this

<PerRiverComp
    pricingName = "本益比河流圖"
    options = { options }
    pricingExplain = { PerRiverInit }
/>

//  PerRiverComp.js
import React from 'react';
import HighchartStockComp from '../highchart/highchatStockComp';

function PerRiverComp(props) {
    return (
        <>
            <div className = 'card h-100' style = {{ minHeight : "200px" }}>
                <div className = 'card-body'>
                    <h3 className = 'card-title'>{ props.pricingName }</h3>
                    <div className = 'row' style = {{ minHeight : "100px" }}>
                        <h6 className = "card-subtitle text-muted">{ props.pricingExplain["explain1"] }</h6>
                        <br/>
                        <h6 className = "card-subtitle text-muted">{ props.pricingExplain["explain2"] }</h6>
                    </div>
                </div>

                <HighchartStockComp options = {props.options} />
            </div>
        </>
    );
}

export default PerRiverComp;

this is HighchartStockComp content

// HighchartStockComp.js
import React from 'react';
import "highcharts/css/stocktools/gui.css";
import "highcharts/css/annotations/popup.css";
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highstock'

import exporting from "highcharts/modules/exporting";
import Indicators from "highcharts/indicators/indicators-all.js";
import DragPanes from "highcharts/modules/drag-panes.js";
import AnnotationsAdvanced from "highcharts/modules/annotations-advanced.js";
import PriceIndicator from "highcharts/modules/price-indicator.js";
import FullScreen from "highcharts/modules/full-screen.js";
import StockTools from "highcharts/modules/stock-tools.js";

Indicators(Highcharts);
DragPanes(Highcharts);
AnnotationsAdvanced(Highcharts);
PriceIndicator(Highcharts);
FullScreen(Highcharts);
StockTools(Highcharts);
exporting(Highcharts);

function HighchartStockComp(props) {
    return (
        <>
            <HighchartsReact
                highcharts = { Highcharts }
                constructorType = { 'stockChart' }
                options = { props.options }
            />
        </>
    );
}

export default HighchartStockComp;

[ppotaczek]

Which Highcharts version do you use? In the newest version (10.2.1) the buttons works fine.

Live example: https://codesandbox.io/s/highcharts-react-demo-8yk8qi?file=/demo.jsx

[leo4707]

In my package.json

    "highcharts": "^10.2.1",
    "highcharts-react-official": "^3.1.0",
    "react": "^17.0.2",

I find the problem when i use setState, the button cannot work

[ppotaczek]

Could you reproduce the problem in some online code editor?

[leo4707]

OK, i use setData1 to change data1, then the button just broken https://codesandbox.io/s/elated-euler-6jo71k?file=/src/App.js

[ppotaczek]

Thanks for the example.

The problem is related to updating stock tools and it also occurs in a pure JS environment: https://jsfiddle.net/BlackLabel/f6cu0gm9/

Please report about the problem on the main Highcharts repository: https://github.com/highcharts/highcharts/issues

However, to avoid updating unchanged parts of chart config, keep all options in state and update only the changed ones.

Live demo: https://codesandbox.io/s/exciting-cloud-l978e-l978e1?file=/src/App.js Docs: https://github.com/highcharts/highcharts-react#optimal-way-to-update

[leo4707]

OK, thanks. I will report the problem to main Highcharts