I have built some HighChart and I would like to give the 3 columnrange different colors (And not just blue as the current highChart Please see the jsfiddel link below) to make it simple for persons to see the difference when taking a look at my HighChart.
https://jsfiddle.net/LLExL/7281/
Highcharts.chart('container',
{
chart: {
type: 'columnrange',
inverted: true,
height: 200,
spacingLeft: 30
},
credits: {
enabled: false
},
title: {
text: null,
style: {
"fontSize": "10px"
}
},
subTitle: {
text: null
},
legend: {
enabled: false,
},
plotOptions: {
series: {
pointWidth: 30
}
},
xAxis: {
min: 1,
max: 1,
categories: ['', ''],
title: {
text: null
},
labels: {
rotation: 90
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime',
title: {
text: null
},
labels: {
rotation: -45,
style: {
"fontSize": "10px"
}
},
tickInterval: 1800000,
gridLineWidth: 1
},
series: [{
data: [
[1, 1483337940000, 1483338000000],
[1, 1483338300000, 1483339740000],
[1, 1483340580000, 1483340640000],
[1, 1483340640000, 1483340820000],
[1, 1483340820000, 1483341000000],
[1, 1483342800000, 1483342860000],
[1, 1483342860000, 1483342920000],
[1, 1483342920000, 1483342980000],
[1, 1483346460000, 1483346520000],
[1, 1483347120000, 1483347180000],
[1, 1483347180000, 1483348440000],
[1, 1483348440000, 1483348620000],
[1, 1483348620000, 1483348740000],
[1, 1483350180000, 1483350240000],
[1, 1483350420000, 1483351380000],
[1, 1483353300000, 1483353420000],
[1, 1483355280000, 1483355340000],
[1, 1483358580000, 1483359780000],
]
}]
}
);
You can replace the each point array with object and declare separate color.
{x:1, low: 1483337940000, high:1483338000000,color: 'red'},
Example:
https://jsfiddle.net/ch4683os/
Zones would probably be better for you here. That way the color belongs to the chart not the data. Zone value represents up to next x range.
Here's the example for Highcharts docs:
Highcharts.chart('container', {
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [{
value: 0,
color: '#f7a35c'
}, {
value: 10,
color: '#7cb5ec'
}, {
color: '#90ed7d'
}]
}]
});
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/
Also see: http://api.highcharts.com/highcharts/plotOptions.column.zones
Related
When trying to configure a polar chart in highcharts 7.2.0 I am unable to configure the chart to always show labels on the xAxis. When the chart is not a polar chart then configuration property of xAxis.labels.styles.textOverflow = 'none' works correctly. The jsfiddle below shows that labels on the xAxis will automatically be removed if they collide with another label. I am looking to configure the polar chart to do the same thing as the line chart. When chart.polar: true is removed you can see the line chart with labels that overlap each other.
https://jsfiddle.net/y6xor7ac/3/
Highcharts.chart('container', {
chart: {
// comment this line to show line graph working correctly
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
subtitle: {
text: 'Also known as Radar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
overflow: 'allow',
labels: {
style: {
textOverflow: 'none'
},
format: '{value}° super long text to make it overlap super long text to make it overlap super long text to make it overlap '
}
},
yAxis: {
min: 0,
overflow: 'allow',
stackLabels: {
allowOverlap: true
}
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
You can use internal allowOverlap property:
xAxis: {
...
labels: {
allowOverlap: true,
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/1rkz9sfp/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
I am working ReactHigh charts on polar graphs, I want my labels to come in between the sectors of the circle, they are coming on points but i dont want them to come there.
JSfiddle : https://jsfiddle.net/ra73mp0c/12/
Also I want a background color on each of the labels.
Graph as of now :
Desried Outcome :
Please help me .
Config of graph :
const config = {
chart: {
polar: true,
type: 'line',
width: 700,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: null
},
pane: {
size: '80%'
},
xAxis: {
categories: [
'Sales',
'Sales',
'Sales',
'Sales',
'Marketing',
'Development',
'Customer Support',
'Customer Support',
'Customer Support',
'Information Technology'
],
labels: {
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
},
tickmarkPlacement: 'on'
},
yAxis: {
gridLineInterpolation: 'polygon',
min: 0,
tickInterval: 1,
max: 6
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: { enabled: false },
series: [
{
name: 'Allocated Budget',
data: [1, 2, 3, 1, 4, 3, 1, 2, 4, 1],
pointPlacement: 'between'
},
{
name: 'Actual Spending',
data: [2, 4, 2, 1, 3, 4, 2, 2, 1, 4],
pointPlacement: 'between'
}
]
}
Thanks a lot, It would be helpful ig you can edit the fiddle Link https://jsfiddle.net/ra73mp0c/12/
Creating that kind of background for x axis labels is not supported in Highcharts.
As a workaround you can create a phantom series that mimics their look:
{
showInLegend: false,
type: 'polygon',
name: 'Labels background',
data: [
[1, 5],
[2, 5],
[2, 6],
[1, 6]
],
zIndex: -9999
}
labels.distance should be a negative value to make it work.
Demo: https://jsfiddle.net/BlackLabel/63nc1csv/
I use Highchart with areaspline type and my problem is the area is got be blacked or gray based on fillOpacity in plotOptionsp property. I use this in different syntax type but the result is same.
For example :
plotOptions: {
area: {
fillOpacity: 0.5,
},
}
or :
plotOptions: {
series: {
fillOpacity: 0.5,
},
}
You can see the screenshot of result:
And here is my code:
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
What should I do to resolve this problem?
I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)',
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M
Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});
I have a problem with a highcharts graph, regarding overlapping of multiple axes.
There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.
You may see my problem here:
http://jsfiddle.net/99tC7/
Anticipated thank you for any help provided.
$('#container').highcharts({
title: {
text: 'Title',
x: -20 //center
},
xAxis: {
categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
labels: {
rotation: 270
}
},
yAxis: [{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 1"
},
},
{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 2"
},
opposite: true,
max:50,
minPadding:5,
}],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'%';
}
}
},
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: 'L1',
type: 'column',
color: '#FF0000',
yAxis: 0,
data: [1, 5, 9, 10, 12]
},
{
name: 'L2',
type: 'column',
color: '#00FF00',
yAxis: 0,
data: [16, 16, 106, 12, 11]
},
{
name: 'L3',
yAxis: 1,
data: [38, 24, 37, 29, 37]
}
]
});
You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/