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
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
Is there a way to have 'datetime' for the xAxis type on the main series, but then when a series is clicked on, have the drilldown use categories for that time?
In this jsfiddle example (http://jsfiddle.net/kadams/3e3xqv7e/), you can see that when 'category' is used as the xAxis type, the drilldown data correctly uses the drilldown series names 'A', 'B', and 'C' on the xAxis. But when the xAxis type is changed to 'datetime', and and the millisecond time is used for the 'x' value in place of a name for the main series, the categories on the drilldown don't show 'A', 'B', or 'C' anymore. Just meaningless dates.
UPDATE for clarification - I would prefer to use the 'datetime' type instead of 'category' type with values formatted as dates, because Highcharts will throw the 'too many ticks' error when the x-axis is big: http://www.highcharts.com/errors/19. I give the 'category' type example in the fiddle below simply to demonstrate that 'A', 'B', 'C' do show properly when the type is not 'datetime'.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
},
xAxis: {
type: 'category',
// type: 'datetime',
dateTimeLabelFormats: {
hour: '%l:%M %p'
}
},
legend: {
enabled: false
},
series: [{
name: 'Total',
colorByPoint: true,
data: [{
y: 8,
drilldown: 'Bob',
name: 'Bob', //used with 'category' xAxis type
x: 1420700400000 //used with 'datetime' xAxis type
}]
}],
drilldown: {
series: [{
id: 'Bob',
name: 'Bob',
data: [{
name: 'A',
y: 3
}, {
name: 'B',
y: 3
}, {
name: 'C',
y: 2
}]
}]
}
});
});
I have found a solution for your problem! Sebastian Bochan gave me some ideas. You need to separate xAxis and set a different type to each one. So, here you have to add your categories as Highcharts's way.
xAxis: [{
id: 0,
type: 'datetime'
},
{
id: 1,
type: 'categories',
categories: data.categories
}
]
Then you have to add this code in your serie to link it with your new Axis.
drilldown: {
series: [{
name: "test",
id: "test",
xAxis: 1, // <--- your desired X axis ID
data: [
[your data]
]
}]
}
Probably you'll see a small difference on bottom chart, but all works for me.
I hope this help to you ;)
You need to add this to your xAxis:
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
},
Check out the fiddle.
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]]
}]
});
How do you put flags on a Highchart with dual axes?
I've tried a bunch of things but I can't get it to render...
flags: http://www.highcharts.com/stock/demo/flags-placement
dual axes: http://www.highcharts.com/demo/combo-dual-axes
Yes it is possible http://jsfiddle.net/MGzjk/
{
type: 'flags',
name: 'Flags on axis',
data: [{
x: Date.UTC(2011, 2, 1),
title: 'On axis'
}, {
x: Date.UTC(2011, 3, 1),
title: 'On axis'
}],
shape: 'squarepin'
}