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]]
}]
});
Related
I'm trying to render plotLines on Highcharts. But somehow I'm not able to render labels on plotLines.
Here is the code snippet:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'view_content',
type: 'line'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal',verticalAlign: 'bottom',
textAlign: 'right',}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 50]
},
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: true
},
data: [450]
}]
});
And after chart is rendered I'm calling addPlotLines function.
chart.yAxis[0].addPlotLine({
value: 35.5,
color: 'green',
width: 2,
id: 'plot-line-1',
label:{text:"Testing"}
});
Plotlines is getting rendered but label on it is not rendering.
Here is the screenshot:
Am I missing anything here?
Jquery Version: 3.1.0
Highcharts Version: 6.0.3
This problem is a bug and it is reported here: https://github.com/highcharts/highcharts/issues/8477
To make it work in versions lower than 6.1.1 use this workaround:
Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotLinePath', function(proceed) {
var path = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (path) {
path.flat = false;
}
return path;
});
Live demo: https://jsfiddle.net/BlackLabel/grpwztL3/
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
The following picture is my desired result (each of the column belongs to different series):
When there is only one series in the chart, it is an achievable result; but when there are two series in the chart, the positions of the bars are skewed (not exactly on tick).
The only difference between these two charts is:
{
enableMouseTracking: false,
pointPlacement: 'on',
data: finArray, //position not skewed as this series has the same data as the other series
pointWidth: argPWidth
}]
and
{
enableMouseTracking: false,
pointPlacement: 'on',
data: finArray1,
pointWidth: argPWidth
}]
I suppose that disabling grouping should solve your problem:
var chart = Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
min: 0.5,
max: 2.5,
tickInterval: 1
},
plotOptions: {
column: {
grouping: false
}
},
series: [{
data: [
[1, 5]
]
}, {
data: [
[2, 2]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/mohhq9rz/
API reference: https://api.highcharts.com/highcharts/series.column.grouping
I can accomplish basic drill down functionality in dotnet highcharts, meaning i can drill down a column chart into other column charts.
However i am attempting to drill down a column chart into a stacked column chart.
Meaning that for each column on level 1 there would be multiple stacked columns on level 2 (when you click the first regular column chart)
I am using dotnet highcharts and asp.net mvc.
I believe my problem lies when i drill down, as the code i have for a stacked column and regular column work, however when putting them together i cant seem to get the result im looking for.
So much like this example:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
$(function () {
// Create the chart
$('#container').highcharts({
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]
]
}]
}
});
});
i want to drill down my column graph, but instead of having another layer of columns i would like stacked column.
I have tried adding plotoptions for normal stacking inside the drilldown method and have tried adding a stack tag to each instance of data, but none seem to be working.
Is there a way to reverse the order of only the negative stacked bars?
I am using Highcharts to render a stacked bar chart. When the graph render the stacks it starts from the y 0-line and render them in order which result in that the negative stacks look reversed.
Example (http://jsfiddle.net/moppa/6tenw/2/):
If you read the graph from bottom to top you get the following result
All series except "Grapes" get the order Joe, Jane, John
The "Grapes" series get the order Jane, Joe, John
The grapes series is not complying with the order in the legend box. Is there any way to fix this?
Code to comply with Stack Overflow guidelines:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: false,
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'John',
data: [50, 30, 40, 70, 20]
}, {
name: 'Jane',
data: [20, 20, 30, -20, 10]
}, {
name: 'Joe',
data: [30, 40, 40, -20, 50]
}]
});
});
});