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',
},
},
},
},
},
],
},