I am trying to create a column highchart that is stacked and grouped, but I only want the last few x-values to have multiple groups/stacks. The first x-values only have one group/stack.
To explain, I am charting historical values and then comparing optimistic and conservative forecast scenarios.
Here is my jsFiddle. A better way to do this?
series: [{
name: 'Thermal',
data: [5, 3, 4, 5],
stack: 'conservative',
color:'blue'
}, {
name: 'PV',
data: [3, 4, 4, 6],
stack: 'conservative',
color: 'red'
}, {
name: 'Thermal',
data: [0, 0, 0, 10],
stack: 'optimistic',
color: 'blue',
showInLegend: false
}, {
name: 'PV',
data: [0,0,0, 12],
stack: 'optimistic',
color: 'red',
showInLegend: false
}]
Basically highcharts is awesome and you can stack bars and give them relevant data on a point basis. I passed the following for my series array, with additional attrs to passs to the tooltip. See jsFiddle here:
series:[
{name:'Apples', color:'green', data:[{x:0, y:10, year: '2009', scenario: 'historic'}, {x:1, y:11,year: '2010', scenario: 'historic'} ]},
{name:'Oranges', color:'orange', data:[{x:0, y:2, year: '2009', scenario:'historic'}, {x:1, y:5, year: '2010', scenario:'historic'}]},
{name:'Apples',color:'green', data:[{x:1.75, y:12, year:'2011',scenario:'optimistic'}], showInLegend: false },
{name:'Apples', color:'green',data:[{x:2.25, y:3,year:'2011', scenario:'conservative'}], showInLegend: false },
{name:'Oranges',color:'orange', data:[{x:1.75, y:11, year:'2011',scenario:'optimistic'}], showInLegend: false},
{name:'Oranges',color:'orange', data:[{x:2.25, y:6, year:'2011',scenario:'conservative'}], showInLegend: false},
]
Related
I am using line chart(highcharts) for my reactjs project and the requirement is data after 2015, line should be shown as dashed line and data before 2015 line should shown as solid line(no dashed). Is there any way out how to achieve this? I have check the highchart documentation there is property called as className inside series->data, but cannot understand how to do it? can anyone help me please?
Example you have 2 series. One series is data after 2015 at first index and data before 2015 at second index. And you need to add "dashStyle" is supported by highcharts.
The below example code will help you:
series: [
{
data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
dashStyle: 'longdash'
},
{
data: [6, 7, 8, 9, 10, 11, 6, 2, 24, 5, 9],
dashStyle: 'solid' // or none dashStyle for 'solid' type
}
]
You can use the zones feature to reach wanted effect.
Demo: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-dashstyle-dot/
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
zoneAxis: 'x',
zones: [{
value: 8
}, {
dashStyle: 'dot'
}]
}]
API: https://api.highcharts.com/highcharts/series.line.zones.value
I'd like to plot progress versus timeline on a 2 x-axis bullet chart.
See this JSFiddle for what I currently have: http://jsfiddle.net/ejhnnbk0/
Highcharts.chart('container3', {
xAxis: [{
type: 'linear',
},{
type: 'datetime',
opposite: true
}],
yAxis: {
plotBands: [{
from: 0,
to: 14,
color: '#f00'
}, {
from: 14,
to: 20,
color: '#ff0'
}, {
from: 20,
to: 29,
color: '#0f0'
}],
labels: {
format: '{value}'
},
title: null
},
series: [{
data: [{
y: 16,
target: 21
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
What I am looking to implement is something like this, where a date range is on the top x-axis, and a numeric range is on the bottom x-axis. I'd like the bullet to represent progress (in this case, 16 out of 24), and I'd like the target line to indicate the current date in the date range (in this case, somewhere before 02/12/2018).
Any thoughts would be appreciated.
Yes, it's possible.
Fist of all notice that your chart is inverted so you need to add another y axis (not x).
There're going to be 2 series: first that displays column (associated with first y axis) and second that displays target (associated with second y axis). In this case grouping has to be disabled (otherwise column and target won't be aligned properly).
Since there's no need to show target for the first series it's type can be changed to column:
series: [{
type: 'column',
data: [{
y: 16,
}]
}, {
yAxis: 1,
data: [{
target: Date.UTC(2018, 0, 7)
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/e847jztb/
Is there an equivalent groupOrder option for graph2d as there is for the timeline widget? http://visjs.org/docs/timeline/#Configuration_Options
Looking to draw bar charts in a specific order to handle overlapping.
The group order is determined by the order how you add groups, unless you set the ids as integers.
This is a example where you set the ids with strings:
a = new vis.DataSet()
-> DataSet {_options: Object, _data: Object, length: 0, _fieldId: "id", _type: Object…}
a.add([{id:"b"}, {id: "a"}, {id: "c"}])
-> ["b", "a", "c"]
a.getIds()
-> ["b", "a", "c"]
But when you create a dataset where the ids are integers, it will sort the datagroups based on the integers:
b = new vis.DataSet()
-> DataSet {_options: Object, _data: Object, length: 0, _fieldId: "id", _type: Object…}
b.add([{id:2}, {id: 3}, {id: 1}])
-> [2, 3, 1]
b.getIds()
-> [1, 2, 3]
When you mix the integers and strings it will sort the integers first and then then leave the strings unsorted.
c = new vis.DataSet()
DataSet {_options: Object, _data: Object, length: 0, _fieldId: "id", _type: Object…}
c.add([{id:"b"}, {id: 2}, {id: "a"} , {id: 1}])
["b", 2, "a", 1]
c.getIds()
[1, 2, "b", "a"]
I'm trying to do a Highcharts chart using the datetime x-axis label to have my main labels at 1 month intervals. I would then like to use a minorTick on the week intervals. My data is 1 point per day. The problem I'm facing is my minorTicks are appearing as grid lines on the chart instead of as sub-ticks. I'd like them to be outside, or at least very small. How can I actually have these minor ticks as ticks, and not grid lines? I otherwise do not want any grid lines at all.
http://jsfiddle.net/590ktt7j/
$('#container').highcharts({
yAxis: {
gridLineWidth:0
},
xAxis: {
minorTickInterval: 7 * 24 * 3600 * 1000,
minorTickPosition:'outside',
minorTickLength:10,
type:'datetime',
min: Date.UTC(2014, 0, 1),
max: Date.UTC(2014, 11, 31),
labels: {
step: 1,
},
dateTimeLabelFormats: {
month: '%b',
year: '%Y'
}
},
// sample data, in reality goes 365 days of year
series: [{
data: [[1388984399000,100], [1388973600000,200],[1389060000000,300],[1389146400000,400],[1389232800000,500],[1389319200000,400],[1389405600000,200]]
}]
});
The grid lines are independent of the ticks. Add these 2 options to your xAxis config:
xAxis: {
minorTickWidth: 1, // this is by default 0 and is why you don't see ticks
minorGridLineWidth: 0, // this disables the grid lines
Fixed fiddle.
The series are fine, but xaxis is reversed,but the code "reversed: true," it is necessary for the proper order of Yaxis
In summary, I need solely reversed Xaxis, for this example:
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
},
xAxis: {
type: 'datetime',
reversed: true,
labels: {
formatter: function() {
return Highcharts.dateFormat('%m/%d/%y', this.value, true);
}
},
showLastLabel: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointInterval: 1 * 3600 * 1000,
pointStart: (new Date()).getTime() - 1 * 24 * 3600 * 1000
}]
});
});
http://jsfiddle.net/raposu/K5tpe/4/
Ok, but if you remove reversed, then reversed Yaxis too. I need the data as they are in the example.
Are inverted data 24 hours ago until now. If you have reversed: false, the time data is correct but the data is invested, if I reversed: true, the data is correct but the time invested.
is tongue twister of hard to explain,
thanks
You say you do not want it reversed but you have reversed: true set. But this is because you want the data in appropriate order. But you are assigning an arbitrary date via (new Date()).getTime() - 1 * 24 * 3600 * 1000. But this is in ascending order...but you are setting reversed: true so it is descending order...but you want it in ascending order.
So, remove reversed: true and you have data going in ascending chronological order (which is a good thing). Since you do not provide an example of an expected outcome this is the best answer I can come up with.
EDIT:
If you want your data to be in the ascending order starting from N hours ago you should first set it so that you send in the x/y values at the same time instead of doing point start. I find it is always better to send in time/value pairs. See this updated example.
I found it finally..... .reverse()
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
pointInterval: 1 * 3600 * 1000,
pointStart: (new Date()).getTime() - 1 * 24 * 3600 * 1000
}]
http://jsfiddle.net/K5tpe/7/
thanks