I have implemented similar chart than this demo: http://www.highcharts.com/demo/area-inverted
How can I reverse the series the date axis so that dates ascend towards top?
EDIT: Actually I got the demo's fiddle working but not this real one. I will try to mirror it to fiddle and post a link here...
UPDATE: Got it working. Here is a demo of dates going upwards and the dataset is timestamped data, dateformat is weekday and no categories used!
Got it working. Here is a demo of dates going upwards and the dataset is timestamped data, dateformat is weekday and no categories used: http://jsfiddle.net/ryfssm1u/
$('#container').highcharts({
chart: {
type: 'spline',
inverted: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1
},
xAxis: {
type: 'datetime',
reversed: false,
tickInterval: 24 * 3600 * 1000,
labels: {
enabled: true,
format: '{value:%a}'
}
},
yAxis: {
},
series: [{
type: 'spline',
color: '#bb2a9d',
lineWidth: 2,
pointInterval: 24 * 3600 * 1000,
data: [
[ 1433297870000, 85 ],
[ 1433211470000, 22 ],
[ 1433125070000, 32 ],
[ 1433038670000, 54 ],
[ 1432952270000, 36 ],
[ 1432865870000, 76 ],
[ 1432779470000, 34 ],
[ 1432693070000, 85 ]
]
}]
});
Related
The Highchart graph code is shown below I want every bar label color is different. Currently, I'm getting the same color in bar
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Popular '
},
credits:{
enabled:false
},
xAxis: {
max: 20,
type: 'category',
style:{
fontSize: '12px'
}
},
yAxis: {
min: 0,
allowDecimals:false,
title: {
text: 'Number of applications',
style:{
fontSize: '12px'
}
},
gridLineWidth:0,
minorGridLineWidth: 0,
tickLength: 5,
tickWidth: 1,
tickPosition: 'inside',
lineWidth:1
},
scrollbar: {
enabled: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'hi'
},
series: [{
name: Stats',
data: data,
color:'#2ecc71',
pointWidth: 25,
}],
Data format is :
[
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
],
]
The output is shown in the picture I want every bar is in a different color can you help me?
Referring to comments you can set a specific color to a single point by adding a color property programmatically to its object like that:
series: [{
data: [
["Qualcom", 17],
{
name: "The ram",
y: 12,
color: 'red'
},
["Aoperty", 8],
["Ob.", 8],
["Sugh", 8]
],
color: '#2ecc71'
}]
API reference:
https://api.highcharts.com/highcharts/series.column.data.color
Demo:
https://jsfiddle.net/BlackLabel/craqy1sv/1/
If you want to add a specific color to a point when a condition is matched you can loop through each series point in chart load event and update a matched point:
chart: {
type: 'column',
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
if (point.name === 'The ram') {
point.update({
color: 'red'
})
}
});
}
}
}
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Point#update
Demo:
https://jsfiddle.net/BlackLabel/jmuoevz1/
You need to set colorByPoint :true to use different colors like that
series: [{
name: 'Stats',
data: [
[
"Qualcom",
17
],
[
"The ram",
12
],
[
"Aoperty",
8
],
[
"Ob.",
8
],
[
"Sugh",
8
]
],
colorByPoint: true,
pointWidth: 25,
}]
Fiddle
I have a series that is composed of:
Daily values, until a certain date
6-monthly values, from that date
onward
I'd like to increase the tick interval exclusively for the second part of the chart, so I can compact the data. To be clear, I want the same space that represents one month on the left side of the chart to represent 6 months on the right side.
I'm not sure if Highcharts allows this... I think there can be two different approaches:
Create two series with two different axis and set one axis after the other
Set different tickInterval for the same axis.
Using tickPositions and tickPositioner I've only managed to show more or less ticks, but always keeping their position on the time axis.
This is my code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
animation: false
},
title: {
text: 'Some data'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 0
},
xAxis: {
type : 'datetime',
tickInterval: 30 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
},
yAxis: {
title: {
text: null
},
maxZoom: 0.1
},
series: jsonData
});
Here's a jsfiddle with a subset of my original data.
Which would be the best way to achieve this?
Highcharts does not allow it by default, but you can use a workaround. You can create two xAxis with right size proportion and two series, like in an example below:
xAxis: [{
type: 'datetime',
endOnTick: false,
tickInterval: 30 * 24 * 3600 * 1000,
max: 1536278400000,
width: '65%',
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
plotLines: [{
color: 'gray',
dashStyle: 'longdashdot',
value: 1536278400000,
width: 1,
label: {
text: 'Selected Date'
}
}]
}, {
min: 1536278400000,
startOnTick: false,
offset: 0,
type: 'datetime',
tickInterval: 180 * 24 * 3600 * 1000,
labels: {
useHTML: true,
rotation: -90
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%b-%y',
year: '%Y'
},
width: '35%',
left: '65%'
}]
Live demo: https://jsfiddle.net/BlackLabel/zxd4j5tn/
How can I remove some values from a yAxis?
My chart is a columnrange (https://www.highcharts.com/demo/columnrange) with days on the x axis (actually y axis, rotated), and I don't want show values for some days.
More in general I want hide some values from domain, i.e. a discontinuous domain.
Example:
Highcharts.chart('container', {
chart: { type: 'columnrange', inverted: true },
xAxis: { categories: [ 'FirstTask' ] },
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () { return Highcharts.dateFormat('%e.%b', this.y); }
}
}
},
series: [{ data: [1497718538701, 1498150538701] }],
});
This code generates a chart with horizontal bar and days from 17 June to 22 June on x Axis (y, rotated).
I want remove days 19 and 20, i.e. all points in interval
[1497891338701, 1497977738701]
Is it possible?
You can use broken axis module to set breaks on an axis.
yAxis: {
type: 'datetime',
tickInterval: 24 * 36e5,
breaks: [{
from: Date.UTC(2017, 5, 19),
to: Date.UTC(2017, 5, 20),
breakSize: 0
}],
It seems that in your case some ticks are overlapping, but it might be fixed with axis.labels.formatter - you can check if the value is outside the break.
labels: {
formatter: function () {
const hide = Date.UTC(2017, 5, 19) <= this.value && this.value < Date.UTC(2017, 5, 20)
return !hide ? this.axis.defaultLabelFormatter.call(this) : null
}
example: http://jsfiddle.net/qhrd9wnw/
The navigator in Highstock only seems to affect the first xAxis. The second xAxis, as in the example linked to below, isn't rescaled, and always shows all data.
See jsfiddle below:
https://jsfiddle.net/wardrop/t9ug4pm7/7/
Does anyone know how to fix this?
You can set extremes in the second axis manually after extremes are set in the first axis.
xAxis: [{
type: 'datetime',
minRange: 24 * 3600000, // 1 day
labels: {
align: "left",
rotation: 45
},
dateTimeLabelFormats: {
day: '%e %b %Y'
},
events: {
afterSetExtremes: function (e) {
this.chart.xAxis[1].setExtremes(e.min, e.max, true, false);
}
}
},
example: https://jsfiddle.net/t9ug4pm7/9/
You can also linked two axis, so the linked axis' extremes will follow after the master axis. But for columns it is needed to define pointRange because without it, columns might be drawn incorrectly.
, { //axis
type: 'datetime',
linkedTo: 0, // linked to master axis
minRange: 24 * 3600000,
lineWidth: 0,
tickWidth: 0,
labels: {enabled: false},
opposite: true
}
series: [{
id: 'daily',
name: 'Daily',
type: 'column',
color: 'rgb(124, 181, 236)',
data: data['daily'],
pointRange: 1000 * 3600 * 24,
},
example: https://jsfiddle.net/t9ug4pm7/11/
We are migrating from a flash based charting library (FusionCharts) to a JavaScript based one (HighCharts).
This is what our current flash charts look like
And this is what I've got so far with HighCharts.
How can I remove the space (marked with big dumb red arrows) between the plot border and the actual chart data?
Here's my code: http://jsfiddle.net/ChrisMBarr/7JAcN/1/
var chart = new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'areaspline',
plotBorderWidth: 1,
spacingTop:2,
spacingRight:5,
spacingBottom:5,
spacingLeft:2,
borderWidth:1,
borderRadius:0,
borderColor:'#999'
},
credits: {
enabled: false
},
title: {
text: 'Total spam in the last 7 days'
},
legend: {
verticalAlign: 'bottom',
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
allowDecimals:false,
categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
yAxis: {
allowDecimals:false,
alternateGridColor: '#F7F7F7',
title: {
text: 'Number of Emails',
margin:5
}
},
tooltip: {
formatter: function() {
var isSpam = this.series.name === _chartOptions.series[1].name
return ''+this.x +': <strong>'+ this.y +(isSpam ? " Spam" : "") +' Emails</strong>';
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
"name": "Total Mail",
"color":"#339999",
"data": [2,3,4,7,8,8,8]
},{
"name": "Spam",
"color":"#003399",
"data": [2,2,4,4,4,6,8]
}]
});
This might help:
xAxis: {
min: 0.5, max: 5.5
...
where max = number of data point minus 1.5
You should use minPadding/maxPadding parameters but it doens't work with categories. So I suggest to remove categoreis, use min value and tickInterval
http://jsfiddle.net/7JAcN/3/
http://api.highcharts.com/highcharts#xAxis.minPadding
xAxis: {
allowDecimals:false,
minPadding:0,
maxPadding:0,
/*categories: [
'Thu 2/14',
'Fri 2/15',
'Sat 2/16',
'Sun 2/17',
'Mon 2/18',
'Tue 2/19',
'Wed 2/20'
],*/
labels: {
staggerLines: 2
},
tickmarkPlacement: 'on',
},
The best way to remove paddings is to add pointPlacement: 'on'
plotOptions: {
areaspline: {
pointPlacement: 'on'
}
}
With option "tickmarkplacement" set to "on", the xAxis "startontick" option might help you:
xAxis: {
startOnTick: false,
tickmarkplacement:"on",
...
see
this jsfiddle, forked from the Highcharts API documentation