I am trying to display the UTC Time zone in the hightchart but I do not know how to add the setOption in the Highchart to global{useUTC: false} in my HighChart? I want to disable the UTC Timezon.
https://jsfiddle.net/LLExL/7281/
Apply like this useUTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
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],
]
}]
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container">
</div>
Related
I have a sample highchart and I want to add the five text boxes with different colors at the bottom of the chart.
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series: [{
name: 'Excellent',
data: [5, 3, 4, 1, 2]
}, {
name: 'Poor',
data: [2, 2, 9, 2, 1]
},
{
name: 'Fair',
data: [5, 3, 1, 7, 2]
}, {
name: 'Good',
data: [2, 2, 3, 6, 1]
}, {
name: 'Very good',
data: [3, 4, 8, 2, 5]
} ]
});
You can use the annotations module to add the text boxes:
annotations: [{
labelOptions: {
y: 0,
overflow: 'none',
shape: 'rect'
},
labels: [{
point: {
x: 50,
y: 280
},
backgroundColor: 'red',
text: 'some text'
}, {
point: {
x: 250,
y: 280
},
backgroundColor: 'blue',
text: 'some text'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/4h0gp2qz/
API Reference: https://api.highcharts.com/highstock/annotations
How do I manipulate the x-axis style on a drilled down chart in Highcharts?
For instance, given the following drilldown chart, how do I hide the x-axis labels in the drilled down version of the chart (that appears when you click one of the columns)?
In general, it seems like there are are not a lot of ways to control the layout of the drilled down chart, is that correct?
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Drilldown mechanism in Highcharts is responsible only for handling series, but it launches drilldown and dillup events which can be used for applying updates:
chart: {
type: 'column',
events: {
drilldown: function() {
this.xAxis[0].update({
labels: {
enabled: false
}
});
},
drillup: function() {
this.xAxis[0].update({
labels: {
enabled: true
}
}, false);
}
}
}
Live demo: http://jsfiddle.net/kkulig/11qhaffe/
API references:
https://api.highcharts.com/highcharts/chart.events.drilldown
https://api.highcharts.com/highcharts/chart.events.drillup
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
I'm trying to plot a chart using highcharts that looks like this. Could somebody please provide a simple example.
I've tried this:
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Positioning Today'
},
subtitle: {
text: 'XXX XXX'
},
xAxis: {
title: {
enabled: true,
text: 'Compliance'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Category'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Acme',
color: 'rgba(223, 83, 83, .5)',
data: [[3, 4], [3, 5], [4, 2], [3, 2]]
}, {
name: 'Competitive Landscape',
color: 'rgba(119, 152, 191, .5)',
data: [[4, 3], [5, 3], [2, 4], [2, 3]]
}]
});
});
http://jsfiddle.net/u6gbd6bx/3/
However, I'm struggling to get the grid and labels on the Y axis.
To get the categories on the Y axis, you need to specify the categories in the axis properties:
http://api.highcharts.com/highcharts#yAxis.categories
To get the grid, you can specify a width and a color for the gridlines for each axis:
http://api.highcharts.com/highcharts#yAxis.gridLineColor
http://api.highcharts.com/highcharts#yAxis.gridLineWidth
Note that grid lines on a chart are very often a distraction from the data - make them subtle if they are truly necessary.
To line the grid lines up with the categories, you can use the tickmarkPlacement property:
http://api.highcharts.com/highcharts#yAxis.tickmarkPlacement
And lastly, to get your data to line up correctly with your categories, you need to provide the category array index as the y value.
So, if your first category is "Support", you provide an x value of 0 for any data point in the Support category, etc.
Note also, that by default y axis categories run from bottom to top - if you want them to run from top to bottom, you can set reversed: true on your y axis.
Example:
http://jsfiddle.net/jlbriggs/6a5jdvyy/
Check the following example: http://jsfiddle.net/mushigh/qr815f25/2/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Positioning Today'
},
subtitle: {
text: 'XXX XXX'
},
xAxis: {
title: {
enabled: true,
text: 'Compliance'
},
gridLineWidth: 2,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Category'
},
categories: ['', 'Support', 'Compliance', 'Risk', 'Fast', 'Easy to Get Started'],
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
y: 15
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Acme',
color: 'rgba(223, 83, 83, .5)',
data: [
[3, 4],
[3, 5],
[4, 2],
[3, 2]
]
}, {
name: 'Competitive Landscape',
color: 'rgba(119, 152, 191, .5)',
data: [
[4, 3],
[5, 3],
[2, 4],
[2, 3]
]
}]
});
});
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)'
}]
});