highcharts would fit perfectly if not for one "but". The strip chart goes behind the axis. The line graph is beyond the axis numbers(50, 100, 150, 200). Watched others but have not found where you can easily stylize the behavior of the graph by accessing its axis
chart like this
Simply disable margins for chart, then play with yAxis.offset to move labels to the right: http://jsfiddle.net/Ywr3L/33/
$('#container').highcharts({
chart: {
marginLeft: 0,
marginRight: 0
},
xAxis: {
type: 'datetime'
},
yAxis: {
offset: -120
},
series: [{
data: [ 1, 2, 3, 2, 3, 2, 1, 2, 3, 2 , 1, 2, 3, 4],
type: 'areaspline'
}]
});
Note: without extra coding you can't start series shape before starting of gridlines.
Related
Here is my code - https://jsfiddle.net/rxqpt8u4/1/
var colors = Highcharts.getOptions().colors;
Highcharts.chart('container', {
chart: {
type: 'streamgraph',
marginBottom: 30,
zoomType: 'x'
},
yAxis: {
min:0
},
// Data parsed with olympic-medals.node.js
series: [
{
"name": "Austria",
"data": [
2, 3, 4, 5, 5, 6, 6, 6, 7
]
}]
});
Can't understand why values dont scales 1:1.
Instead of that, they scale 0.5:1.
Please advise.
The axes adapt to the data and they are independent of each other. To have the same scale on the axes set the same tickInterval, max and min properties:
events: {
load: function() {
var xAxis = this.xAxis[0];
this.yAxis[0].update({
tickInterval: xAxis.tickInterval,
max: xAxis.dataMax
});
}
}
Live demo: https://jsfiddle.net/BlackLabel/289jtzp1/
I am using highcharts with angular 4.
I want to create a chart to show the result something like this:
Where:
GHRM and HR Scanner are application name.
We are showing some data groupwise (application wise here)
To achieve the above result I have tried using columnrange chart type in highcharts.
But the result of above link differs from my requirement. As you can see the result of above link:
Can any one help me to know how I can customize the categories view in this case to achieve the result as shown in first screen shot.
Getting that kind of look with grouped categories plugin would be a rather a hard task to accomplish.
Another approach is using a separate x axis for each set of categories (GHRM and HR Scanner in your case).
Axes can be positioned via left & top properties and sized via height properties. These options are not documented yet but they work. They accept relative values in percents (e.g. 30%) and absolute values in pixels (e.g. 200px).
xAxis: [{
categories: ['Category 1'],
tickWidth: 0,
height: '30%',
offset: 0,
title: {
text: 'First x axis',
rotation: 0,
align: 'high'
}
}, {
categories: ['Category 2', 'Category 3'],
tickWidth: 0,
height: '60%',
top: '40%',
offset: 0,
title: {
align: 'high',
text: 'Second x axis',
rotation: 0
}
}],
plotOptions: {
series: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [
[1, 7]
],
}, {
data: [
[2, 4],
[3, 8]
],
xAxis: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/s3k3s944/
grouping has to be disabled so that columns are always centered. pointPadding, groupPadding and borederWidth force columns to occupy maximum vertical range.
All other options of axes configuration can be found in the Highcharts API: https://api.highcharts.com/highcharts/
Note that the x-axis here means the horizontal line which corresponds the 0 value, i.e. the desired result is:
However, I can only achieve this.
This is the relevant piece of code:
xAxis: {
lineColor: 'black',
lineWidth: 2
},
How to decide which horizontal line to be bolded?
You can draw a line on the Y-axis at position 0. This causes for a horizontal line to be drawn at value '0'. This is done by the highcharts option plotLines
Highcharts.chart('container', {
yAxis: {
min: -1,
max: 4,
plotLines: [{
value: 0,
color: 'black',
width: 2,
zIndex: 3
}],
},
series: [{
data: [1, 2, 3]
}]
});
I create a high chart using angular 4 and I want to highlight a particular portion of Highchart.
Ex Image :https://www.screencast.com/t/MHxo59j2dM
As per above image if data point value goes below to some limit (like 0) then highlight with "Red" color and if it goes below 8 then highlight with Yellow
I'm not sure whether its possible with Highchart or not but if someone had created this kind of features then please let me know.
Highchart provides Area Chart option - https://www.highcharts.com/demo/area-negative but my chart is normal and I don't want to highlight all series point.
There's no such functionality in Highcharts, but you can mimic it by using polygon series and plot lines:
var chart = Highcharts.chart('container', {
plotOptions: {
polygon: {
showInLegend: false
}
},
yAxis: {
tickInterval: 1,
plotLines: [{
value: 4,
color: 'orange',
width: 2
}, {
value: 3,
color: 'red',
width: 2
}]
},
series: [{
data: [6, 4, 3, 1, 2, 3, 4, 7]
}, {
type: 'polygon',
data: [[1,4], [2, 4], [2,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[5,4], [6, 4], [5,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
color: 'red'
}]
});
Live working example: http://jsfiddle.net/kkulig/fbomb7cf/
It will require some programming to make the process of creating these areas automatic (in my fiddle everything is hard-coded).
To achieve similar styling you can try patter fill Highcharts plugin: https://www.highcharts.com/blog/extension/pattern-fill/
API references:
http://api.highcharts.com/highcharts/series.polygon
http://api.highcharts.com/highcharts/yAxis.plotLines
I was toying around with the Logarithmic Scale in Highcharts.
Noticed that the zoom behaves in a weird manner when close to minValue.
The fiddle here is a slightly modified example of the original fiddle that Highcharts had for demonstrating a line chart over log scale.
Here is the code in full for a column chart that utilizes a log scale.
$(function () {
$('#container').highcharts({
chart: {
type:'column',
zoomType:'xy'
},
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 1
},
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br />',
pointFormat: 'x = {point.x}, y = {point.y}'
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
}]
});
});
Try zooming between .1 and 1 and you'll see that everything disappears but the chart seems to have zoomed somewhere.
Is there an explanation for this behavior?
You need to set minRange parameter
yAxis: {
type: 'logarithmic',
minRange:0.1,
minorTickInterval: 0.1
},
http://jsfiddle.net/G6ALa/1/