Related
How to show dynamic text on x-axis based on transition. In my first case, I am getting two transitions(football -> basketball & basketball -> Gerard) so I will be showing two labels just like below
But When we get only one transition so how to handle label on the x-axis. What I need is when only one transition is there one label should only come. In the below case Semi-Final label should come.
Highcharts.chart('container', {
chart: {
showAxes: true
},
title: {
text: ''
},
xAxis: {
type: "category",
categories: ['Semi-Final','Final Phase'],
max: 2,
labels: {
x: 10,
y: 30,
},
lineColor: 'transparent',
tickLength: 0
},
yAxis: {
visible: false
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Football', 'Cricket', 20 ],
],
type: 'sankey',
}]
});
The number of displayed labels depends on axis extremes. You can make max property dependent on the number of data:
events: {
load: function() {
var max = this.series[0].nodeColumns.length - 2;
this.xAxis[0].update({
max: max
})
}
}
Live demo: https://jsfiddle.net/BlackLabel/7s5h41qr/
API: https://api.highcharts.com/highcharts/xAxis.max
I have a single highstock chart with 2 y-axis - one displaying an area chart and below it a column chart.
I am trying to achieve 2 things (both of which I know are possible, just not sure how to do it).
have a single tooltip, not the 3 that are currently showing up
have that tooltip follow the cursor - either tracking the cursor as
it move across the screen, or appear only over the chart which is
being hovered over (in reality the charts will be larger than the
codepen and require the page to be scrolled).
Appreciate any help!
$cumulative_chart = Highcharts.stockChart('container', {
chart: {
type: 'area',
height: 500
},
plotOptions: {
series: {
//stacking: 'normal',
dataGrouping: {
units: [[
'day',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
}
}
},
yAxis: [{
height: '50%'
}, {
top: '65%',
height: '50%',
offset: 0
}],
xAxis: {
offset: 100
},
credits: {
enabled: false
},
tooltip: {
enabled: true,
shared: true
},
series: [{
type: 'area',
data: [[1512086400000, 10626],[1512172800000, 21634],[1512259200000, 34994],[1512345600000, 51400],[1512432000000, 68430]],
stack: 0,
name: 'chart A',
id: 'area'
},
{
type: 'column',
data: [[1512086400000, 10626],[1512172800000, 11008],[1512259200000, 13360],[1512345600000, 16406],[1512432000000, 17030]],
stack: 1,
name: 'chart B',
yAxis: 1,
id: 'column',
showInLegend: false
}]
});
codepen: https://codepen.io/anon/pen/ZozBZM
The option you are looking for is to add split:false to your tooltip. This causes for the tooltip to center itsself around one of your graphs, instead of hovering over all the graphs in your highstock chart.
A working fiddle is found here
You can find more information in the highcharts API
I am creating a gantt chart using Highcharts for a process that has three phase Request, Submission and Approval. It has two stacks for Planned and Actual.
I used the highcharts stacked bars to represent the data plotted like this jsFiddle of Gantt
Instead of data as
series: [{
name: 'Requested',
data: [1,3,4,5,6],
stack: 'Planned'
}, {
name: 'Requested',
data: [2,4,5,7,8],
stack: 'Actual'
}, {
name: 'Submitted',
data: [2,3,2,3,4],
stack: 'Planned'
}, {
name: 'Submitted',
data: [3,5,2,3,4],
stack: 'Actual'
}, {
name: 'Approved',
data: [6,3,2,3,4],
stack: 'Planned'
}, {
name: 'Approved',
data: [2,4,2,3,4],
stack: 'Actual'
}]
I want the data as dates here I have the first,second and third dates respectively for Requested,Submission and Approval.
series: [{
name: 'Part1',
data: [Date.UTC(2013,01,12),Date.UTC(2013,01,23),Date.UTC(2013,02,05)],
stack: 'Planned'
}, {
name: 'Part1',
data: [Date.UTC(2013,01,15),Date.UTC(2013,01,29),Date.UTC(2013,02,05)],
stack: 'Actual'
},]
I need the series name on y-axis to be taken from the data in series
xAxis: {
categories: ['Part1', 'Part2', 'Part3', 'Part4', 'Part5']
},
and
1. the start should be from the data[0] instead hence it will contain two bars and three points.
2. I need difference of dates in the bar so hence I can show the time for each activity.
I tried a with time in millisecondsjsfiddle but couldn't come to anything substantial
You can use "low" and "y" properties in the data so an X offset is rendered and therefore you can have the "Gantt effect" you need:
Please check this example:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Gantt module development plan'
},
subtitle: {
text: 'Using fake data'
},
xAxis: {
categories: ['Planning', 'Development', 'Testing', 'Documentation']
},
yAxis: {
type: 'datetime',
min: Date.UTC(2012, 0, 1)
},
tooltip: {
formatter: function() {
console.log(this.point);
var point = this.point;
return '<b>'+ point.category +'</b><br/>'+
Highcharts.dateFormat('%b %e, %Y', point.low) + ' - ' +
Highcharts.dateFormat('%b %e, %Y', point.y);
}
},
series: [{
data: [{
low: Date.UTC(2011, 11, 20),
y: Date.UTC(2012, 0, 15)
}, {
low: Date.UTC(2012, 0, 10),
y: Date.UTC(2012, 4, 28)
}, {
low: Date.UTC(2012, 3, 15),
y: Date.UTC(2012, 4, 28)
}, {
low: Date.UTC(2012, 4, 15),
y: Date.UTC(2012, 4, 28)
}]
}]
});
Cheers
Fran
I am using Highcharts to chart server performance stats, memory, cpu, etc. I want to add support incidents and change windows to these charts. At first I though the error bar was perfect, but I would need to rotate them to horizontal. As far as I can see, the chart can be rotated, but only the entire chart, not one series.
chart: {
type: 'spline',
inverted: true
},
Any ideas how I can get little horizontal bars on my chart, to represent the duration of incidents. Colouring according to severity wins bonus points.
use plotLines to darw lines on the chart
yAxis: [{
plotLines:[{
value : where do you want the line,
color: 'color for the line'
}]
}]
the same is possible for xAxis
if you want you can add them on demand using the method addPlotLine();
here is the example for plotLines http://jsfiddle.net/QWLhC/
chart.xAxis[0].addPlotLine({
value: where do you want the plotLine,
color: 'color of the plot line'
});
You can use simple line series, where each error bar will be separate series, but all will be connected to one master series, see example: http://jsfiddle.net/3bQne/646/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
line: {
color: 'red',
lineWidth: 10,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
}
}
},
series: [{
type: 'column',
name: 'some data',
data: [4, 11, 5, 16, 9, 22, 11, 1]
}, {
type: 'line',
name: 'errors',
id: 'err',
data: [ [0, 4],[3, 4]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [3, 1], [6, 1]]
}, {
type: 'line',
name: 'errors',
linkedTo: 'err',
data: [ [2,10], [3,10]]
}]
});
hello the following code put flags on series by using type: 'flags' name:'' data:[{}] and so on , "" is there is any way that i can change the flags type to draw lines or areas ?? ""
the code is very simple
series: [{
type: 'line',
name: 'AAPL',
data: ohlc,
id:'dataseries'
}, {
type: 'flags', 'this is what i wanted to change to lines
name: 'Flags on series',
data: [{
x: 1114992000000,
title: 'On series'
}, {
x: Date.UTC(2011, 3, 28),
title: 'On series'
}],
onSeries: 'dataseries',
shape: 'squarepin'
}, {
type: 'line',
name: 'Volume',
data: volume,
yAxis: 1
}]
Are you aware about Plot lines or Plot bands, that highchart supports out of the box?
They haven't given examples of these on x-Axis but they work very much when oriented vertically too
Vertical Plot lines on x axis # jsFiddle