Chart has Linear and Logarithmic buttons. How to get the one which is active to be highlighted? Code below changes colour on hover only.
https://jsfiddle.net/stgk1mrx/
navigation: {
buttonOptions: {
theme: {
states: {
hover: {
fill: '#00f'
},
select: {
fill: '#f00'
}
}
}
}
myButton: {
symbol: 'circle',
symbolStrokeWidth: 1,
symbolFill: '#bada55',
symbolStroke: '#330033',
onclick: function() {
// Something happens here
var self = this.exportSVGElements[2]; // 0-1 is first button, 2-3 is second button etc.
self.setState(2);
console.log('clicked!');
},
theme: {
states: {
hover: {
fill: '#FF0000'
},
select: {
fill: '#0000FF'
}
}
},
http://jsfiddle.net/yTRxZ/5/
By setting select state you will get color changed after click on button. You also need to call setState() for that button. Take a look at the example
Related
I am trying to change the color and borderColor of a lat/long point on a Highmap when a user clicks it. Currently when a user clicks that point it turns grey with a thick black border and a "glow" effect around it. I would like it to turn a color of my choosing. I have set the options as follows:
plotOptions: {
series: {
tooltip: {
headerFormat: '',
pointFormat: '{point.name}'
},
states: {
select: {
color: '#EFFFEF',
borderColor: 'red'
},
hover: {
color: '#a4edba'
}
}
}
}
This does not appear to be working. If I put the same states code under plotOptions.mappoint there is, again, no change.
I have repurposed the Highmaps demo with this set up. On that demo if you click on the Basin shape it turns that light green. However, when you click on "Tournai" or "Brussels" or any other point on the map it does not use the states option I have set.
Remember to set the allowPointSelect option to true on series - https://api.highcharts.com/highmaps/series.mappoint.allowPointSelect
If you want to change the point status on click the state options should be set on plotOptons.series.marker.states, not plotOptions.series.states,
Demo: https://jsfiddle.net/BlackLabel/wgqcL1ay/
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
states: {
select: {
fillColor: 'red',
radius: 12,
}
}
}
}
},
API: https://api.highcharts.com/highmaps/series.mappoint.marker.states.select
If you look at the example here; when hovering the mouse over a marker point a rectangular box pops up. How do I provide a border-radius to this box.
series: {
marker: {
lineColor: null,
states: {
hover: {
fillColor: 'white',
radius: 10
}
}
}
}
You can change border radius via tooltip.borderRadius property.
tooltip: {
borderRadius: 20
},
example: http://jsfiddle.net/L24w2ghd/
Is it possible to format the exporting "contextButton" in Highcharts? (Specifically to look more like other buttons on a page.) I do not mean creating a new button with new functionality, I mean the exact functionality of the standard exporting contextButton, I just want to change basic css like colors. Thanks.
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
color: '#f00', // this does nothing
},
},
The documentation for the context button is at...
http://api.highcharts.com/highcharts#exporting.buttons.contextButton
If you want to change the color of the symbol on the button then use the symbol attributes. For example...
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
symbolFill: '#f88',
symbolStroke: '#f00'
}
}
}
If you want to change the color of the button then use the theme attribute. For example...
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
theme: {
fill: '#ddd',
stroke: '#888',
states: {
hover: {
fill: '#fcc',
stroke: '#f00'
},
select: {
fill: '#cfc',
stroke: '#0f0'
}
}
}
}
}
}
In Highcharts3 the export button uses states.hover or states.select to extend default behavior. This fiddle shows how to change the button background color and border color. I tried to use it to change the symbol color, but no luck:
theme: {
states : {
hover : {
symbolStroke: '#4572A5'
},
select : {
symbolStroke: '#4572A5'
}
}
Is there any way to change the color of the symbol?
Probably it is possibly bug, so I reported here: https://github.com/highslide-software/highcharts.com/issues/2218
This might help
buttonOptions: {
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
From Highchart API http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/navigation/buttonoptions-theme/
I want to change style of selected points. When i select point it is gray. I want all my selected point to be red.
You set the style for the markers.state.select as:
plotOptions: {
series: {
allowPointSelect: true,
marker: {
states: {
select: {
fillColor: 'red',
lineWidth: 0
}
}
}
}
}
Example: http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-marker-states-select-fillcolor/
Reference: http://www.highcharts.com/ref/#plotOptions-scatter-marker-states-select
Update: For barcharts the configuration should be slightly different (don't know why really):
plotOptions: {
series: {
allowPointSelect: true,
states: {
select: {
color: 'red'
}
}
}
}
Example: http://jsfiddle.net/8truG/