I need to change the border color of a specific data series based on his category in a bar chart ... is it possible with some formatter function?
If yes, are there some examples?? Thank you for your help!
For setting colors for series you can define an array of colors.
I'm not sure what you mean with specific data series but it's an option to set color and border for each point individually.
data: [{
y: 814,
borderColor: '#FFFF00',
borderWidth: 10
}]
Example: https://jsfiddle.net/BlackLabel/u6czsqmr/
Thank you for your reply.
I have found a solution that works well.
const scelte = array('uno','due','tre');
labels: {
formatter: function(){
var color = (this.value);
var sper = scelte.includes(color) ? 'red' : 'blu';
return '<span style=\"color: '+sper+';font-weight:bold;font-size:16px;font-family:calibri\">'+this.value+'</span>';
}
}
},
If var color is in array scelte then the label color will be red, in all the other cases the label color will be blu.
I'm trying to solve the same problem for pie chart ... but at the moment I don't find it. Any suggestion?
Thank you
Related
I have a Gantt Chart with a Navigator bar at the bottom that look like this:
The image as you can see is hard to read because of the color of the milestones... my question is, how do we get a white border on each of these milestones... I tried on almost everything the docs say, on series, datalabels, etc and I can't make any border show, thank you for any help you may bring.
You just need to specify borderWidth and borderColor properties for the specific data points:
Highcharts.ganttChart('container', {
series: [{
...,
data: [
...,
{
...,
borderWidth: 2,
borderColor: 'black'
}]
}],
...
});
Live demo: https://jsfiddle.net/BlackLabel/xps2d6z3/
API Reference:
https://api.highcharts.com/gantt/series.gantt.borderWidth
https://api.highcharts.com/gantt/series.gantt.borderColor
I am using highcharts polar-spider chart. Is there any way to set color pattern in grid.
There is yAxis.alternateGridColor but i need pattern in color.
Poler chart
Please check below image so you can get idea, What i am talking about.
enter image description here
You can use plot-bands to achieve the required result:
yAxis: {
...,
plotBands: [{
color: 'red',
from: 20,
to: 50
}, ...]
}
Live demo: https://jsfiddle.net/BlackLabel/g62h0apb/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I would like the bubble's color have different colors according to their value from 2 colors range (lightest is low value and darkest is higher value).
I used the colors array like this:
colors: ['#69ADC7', '#4F4899']
fiddle here
But still I get only 1 color for al bubbles.
Any ideas please?
You are using object in data so you must define the color for each object :
...
{
x: 74.2,
y: 68.5,
z: 141.5,
name: 'FR',
country: 'France',
color:'#4F4899'
}
...
Edit
Add this code :
plotOptions: {
series:{
colorByPoint:true
}
},
Updated Fiddle - Api link
I only want to know if it's possible delete, or don't show, the frame in the middle of Gauge Chart that contains the value (below pivot). I got more than one serie and values overlap each other.
Thanks!!
One way is, you can format your datalabels and return nothing in the formatter () function.
dataLabels: {
formatter: function () {
var kmh = this.y,
mph = Math.round(kmh * 0.621);
}
}
Fiddled version. (tweaked from Highchart demo sample )
Hope this is you need.
Another option is
dataLabels: false
Documentaion: Gauge DataLabels enabled