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/
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
I form charts and a have such series format:
series: {
id : '001',
name: 'name,
data: [],
color: '#fff'
}
In plotOptions I created onClick event:
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
allowPointSelect: true,
marker: {
states: {
select: {
enabled: true
}
}
},
point: {
events: {
click: function () {
console.log('!!!!!', this);
}
}
}
}
}
After clock i get object in log. There is all information except id: '001'. How can I get it?
You attached the click event to the point, so this inside the callback refer to the point object. Id is defined in series' options.
You can access it from series.options object:
point: {
events: {
click: function() {
console.log('!!!!!', this.series.options.id);
}
}
}
live example: http://jsfiddle.net/4s3ayhfy/
I have a set of series with markers disabled, and I want to enable all the markers on serie hover, not individual point ans the doc states here: http://api.highcharts.com/highcharts/plotOptions.series.states.hover
The closest thing I had is this:
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
hover: {
enabled: true,
marker: {
enabled: false
}
}
}
}
}
With this I hoped that the markers are all off, and when hovering all the markers are showed, as I thought that the series markers.enabled was set to true, but as the docs I shown above states, this is not what happens.
I would like to do this to show the user where he can mouseover to see the next/prev tooltip, as the markers are not equidistant.
Is possible to achieve this?
You can use series.events.mouseOver and series.events.mouseOut functions for updating your series, so you will show or hide your markers.
plotOptions: {
series: {
stickyTracking: false,
marker: {
enabled: false
},
events: {
mouseOver: function() {
this.update({
marker: {
enabled: true
}
});
},mouseOut: function() {
this.update({
marker: {
enabled: false
}
});
}
}
}
},
Here you can see an example how it can work: http://jsfiddle.net/hgbz7kg6/
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'
}
}
}
}
}
}