micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

how to conditionally change the fill color of export button in Highcharts

I have two export buttons at shown here : https://stackblitz.com/edit/react-ts-re ... Options.js

What I want to achieve is as below,

1) I want to position those two buttons to the top left corner in the same order (currently it is positioned at top right corner). If I try to resize the window, they should remain at top left position only.

2) Default selected button is $ with `red` fill color. Now, when I click on ¥ button, it should remove `red` fill color from $ button and same `red` fill color will be applied to ¥ button and vice versa. Basically these two buttons are toggle buttons.

3) Whenever you change the value from top dropdown, default selection should go $ button always with `red` fill color.


I tried multiple things but unfortunately none of my solution is working as expected. You can play with the given link.

Code: Select all

 exporting: {
                buttons: [
                  {
                    text: '¥',
                    onclick: () => {
                      exportButton.type = '¥';
                      exportButton.isDollarSelected = false;
                      alert('¥ selected');
    
                      setOptions({
                        // how to set exporting button fill color
                      });
                    },
                    theme: {
                      'stroke-width': 1,
                      fill: `${!exportButton.isDollarSelected ? 'red' : 'white'}`,
                      states: {
                        hover: {
                          fill: '#a4edba',
                        },
                      },
                    },
                  },
                  {
                    text: '$',
                    onclick: () => {
                      exportButton.type = '¥';
                      exportButton.isDollarSelected = true;
                      alert('$ selected');
                      setOptions({
                        // how to set exporting button fill color
                      });
                    },
                    theme: {
                      'stroke-width': 1,
                      fill: `${exportButton.isDollarSelected ? 'red' : 'white'}`,
                      states: {
                        states: {
                          hover: {
                            fill: '#a4edba',
                          },
                        },
                      },
                    },
                  },
                ],
              },
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: how to conditionally change the fill color of export button in Highcharts

Hi there,

Is there a particular reason for using the export buttons as toggle buttons? If you don't use them for exporting, then I would suggest using standard HTML button, or Highcharts.SVGRenderer to create a custom button. It will be much easier to style them, and place on your chart/inside the div.

SVGRenderer: https://api.highcharts.com/class-refere ... rer#button

Try the solutions mentioned above and let me know how that went!
Best regards
Kamil Musiałowski
Highcharts Developer
micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Re: how to conditionally change the fill color of export button in Highcharts

Hi @Kamil

Thanks for the reply and pointing out to SVGRenderer but any practical small demo (possible in react) would help a lot. Looking forward.
micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Re: how to conditionally change the fill color of export button in Highcharts

@Kamil

I just did what you said and achieved this https://stackblitz.com/edit/react-ts-aw ... Options.js

I still need help in toggle them.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: how to conditionally change the fill color of export button in Highcharts

Thank you for creating the SVGRenderer example. I have extracted it from your React project and created a vanilla JS demo so that it's more readable and useful for future forum users that might come across this topic.

The background manipulation is achieved by toggling between normal and selected states with setState function.

DEMO: https://jsfiddle.net/BlackLabel/7am8x3zp/

Let me know if that's what you were looking for,
Best regards!
Kamil Musiałowski
Highcharts Developer
micronyks
Posts: 13
Joined: Wed Jun 08, 2022 7:23 am

Re: how to conditionally change the fill color of export button in Highcharts

Thanks Kamil. This is exactly what I needed.

Regards,
micronyks
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: how to conditionally change the fill color of export button in Highcharts

Great to hear that!

Do not hesitate to contact us with any further questions,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”