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/
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
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
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
});
}
}
},
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/
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/