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
});
}
}
},
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/
I have a stacked bar chart where I am applying custom borders after the chart has loaded i.e.
},function(chart){
chart.series[1].data[0].graphic.attr({'stroke':'yellow','stroke-width': 2})
chart.series[1].data[1].graphic.attr({'stroke':'yellow','stroke-width': 2})
This works fine, except for the fact that the left border stroke doesn't show the full width i.e.
These are my plotOptions:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
},
stacking: 'normal',
pointPadding: 0.1,
borderWidth: 0,
lineWidth: 0,
dataLabels: {
enabled: true,
formatter: function() { return this.series.index==0 ? "<div style='color:#000000;'>"+this.y + "</div>" : this.y ; },
useHTML: true,
connectorWidth: 1,
style: {
fontSize: "14px",
color: '#FFFFFF',
fontWeight: 'normal'
}
}
}
},
Additionally, even though I have disabled the hover effect (as you can see in the plotOptions above), when you mouse over the highlighted bar, the yellow border changes to white:
AFTER HOVERING
Any pointers to resolving either of these issues would be appreciated.
FIXED - Hover Issue
I was able to use plotOptions: {series: { enableMouseTracking :false}}} to disable all mouse interaction. This solved the hover effect of changing border back to white.
If you need to retain mouse interaction, just enable the default border color to be your highlighted one i.e. plotOptions: { bar: { borderColor: "yellow"}}
FIXED - SVG Border issue on Stacked charts
It's a bit of a hack but I used some jQuery in the post chart creation function to remove 1px from the height of the bar and add 1px to the y value, for the affected stacked bar i.e.
$(".highcharts-series:gt(0) rect").each(function(index,value) {
$(this).attr("height",$(this).attr("height")-1);
$(this).attr("y",parseInt($(this).attr("y"))+1);
I want to change color on yAxis in 3d chart, for example this:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-scatter-draggable/
if I add, in the Yaxis this:
lineColor: '#ff0000'
but the color doesn't change. Why?
You should change the color of side in options3d.frame to change the yAxis color:
frame: {
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
side: { size: 1, color: 'rgba(255,0,0,0.15)' }
}
Then you could use alternateGridColor to have two colors and also play with the opacity of bottom, back and side. Here's the DEMO
EDIT:
You can also use plotBands like this:
plotBands: [{
color: '#FCFFC5',
from: 0,
to: 2.5
}]
DEMO
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/