How to change style of selected point in Highcharts? I would like to give it different color filling inside other than white.
var chart = $('#container').highcharts();
chart.series[0].data[1].select()
Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/point-select/
Use the states option for the marker.
marker: {
states: {
hover: {
fillColor: 'red',
lineWidth: 0
},
select: {
color: 'red',
fillColor: 'green'
}
}
}
http://jsfiddle.net/cpxmzju3/10/
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/
http://jsfiddle.net/0bpkrnd3/4/ demonstrates that there is a very fine white line between the hover halo of a Highcharts pie chart and the pie segment. The halo color is as the same as the hover color and its stroke width is 0.
pie: {
shadow: false,
borderWidth: 0,
states: {
hover: {
color: '#ff7f00',
brightness: 0,
lineWidth: 0,
halo: {
size: 9,
opacity: 1,
attributes: {
fill: '#ff7f00',
'stroke-width': 0
}
}
}
}
}
This is anty-aliasing in SVG. You can play around with different options using shape-rendering CSS option: http://jsfiddle.net/0bpkrnd3/5/ (crispEdges looks even worse ;) )
Anyway, there is another solution you can use, instead of halo. Simply disable halo and use point.events to change radius of the slice: http://jsfiddle.net/0bpkrnd3/6/
Code:
point: {
events: {
mouseOver: function() {
this.graphic.attr({
r: this.shapeArgs.r + 10
});
},
mouseOut: function() {
this.graphic.attr({
r: this.shapeArgs.r
});
}
}
},
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/