I want to customize my charts mostly the title and subtitle like the attached image. Please suggest!
Also I like to add gradient in the area charts.
Is it possible to design chart like this ?
You can set useHTML as true, and in the title text i.e define two divs (left / right content) with correct CSS styles.
text: '<div class="lhsTitle">My custom title</div><div class="rhsTitle">Right content</div>',
CSS
.lhsTitle {
float:left;
}
.rhsTitle {
float:right
}
.highcharts-title {
width:80%;
}
http://jsfiddle.net/sbochan/BETBk/
You can add a linear gradient to the series with the following snippet of code:
... //inside Highcharts chart object
series : [{
name : "Series name",
type : "area",
fillColor : {
linearGradient : [0, 0, 0, 300],
stops : [
[0, Highcharts.getOptions().colors[3]],
[1, 'rgba(2,0,0,0)']
]
},
data: [...]
}]
as shown in the following example: http://jsfiddle.net/aNtnm/
Related
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
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
Hi I am trying bold the labels as per the attached image in the the code base with calculation with percentage as shown
https://codepen.io/SophTooke/pen/ExorZZj
[enter code here][2]
Try use dataLabels.formatter to edit dataLabels, and style inside CSS but remember to set dataLabels.useHTML.
plotOptions: {
sankey: {
dataLabels: {
useHTML: true,
formatter: function() {
let chart = this,
weight = chart.point.weight;
return `Weight: <span>${weight}</span>`
}
},
}
},
Demo:
https://codepen.io/sebastian-hajdus/pen/BarjMap
API References:
https://api.highcharts.com/highcharts/series.sankey.dataLabels.formatter
https://api.highcharts.com/highcharts/series.sankey.dataLabels.useHTML
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
Is there a way to add a second needle of a different colour to a VU Meter ('gauge') style chart in Highcharts? I know that you can change the colour of the needle per chart using plotOptions:gauge:dial e.g.
plotOptions: {
gauge: {
dial: {
radius: '100%',
backgroundColor : 'grey'
}
}
}
and I have tried to overlay a second pane and specify individual plotOptions (as per this fiddle (http://jsfiddle.net/jdalton/xfV5k/8/) but without any success
You can use the same options as in plotOptions directly in series:
series: [{
data: [{y:-6, color: 'red'}],
yAxis: 0,
dial: {
backgroundColor : 'red'
}
}
Example: http://jsfiddle.net/xfV5k/11/