We Keep Coding

Group Categories in columnrange highcharts with custom view

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/

scatter 3d Chart: is it possible to make values XYZ axis not fixed?

Here is my partial code:
plotOptions: { scatter: { width: 2, height: 2, depth: 2 } },
yAxis: { min: -1.50, max: 1.50, title: null },
xAxis: { min: -1.50, max: 1.50, gridLineWidth: 1 },
zAxis: { min: -1.50, max: 1.50, showFirstLabel: false },
legend: { enabled: true }
where XYZ have fixed sizes. My data is always different: sometimes max value could be 60, sometime max value = 0.89
It makes 3D graph not useful, if i setup XYZ for 50 MAX and MIN for small data.
So, my idea is create 3D graph based on data coming on that time.
I am very new to Highlight chart and have no idea how to make charts dynamic. I googled, but could not find solution. Maybe, anyone has idea?

Highcharts polar steps

I'm trying to make a Highcharts polar chart, see this fiddle: http://jsfiddle.net/mgwf23me/
yAxis: {
min: 0,
max: 11,
labels: {
enabled: false
}
},
The problem is that the yAxis max seems to go by steps of 5. With max on 11, the rendered max step is 15.
How do I change this behaviour to be steps of 1?

This is due to endOnTick being true. From the max API description:
If the endOnTick option is true, the max value might be rounded up.
Set this to false, and the axis should have the correct height.
You may also want to adjust the ticks to make the lines show up appropriately. This can be done in a number of ways, using tickPositions, tickPositioner, tickInterval...
My simple suggestion is to do it like this (JSFiddle):
yAxis: {
min: 0,
max: 11,
endOnTick: false, // For axis height
tickPositions: [0,11], // For grid lines
labels: {
enabled: false
}
}

How change Highchart minimum value

For my highchart, I want to set maximum value of 100 and minimum value of 1.
When I try to code like this, it outputs is 0-100 not 1-100.
If I change or remove max range, it works fine for small values of y.
yAxis: {
min:1,
max:100,
reversed: true,
title: {
text: 'Rank'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},

You can try
chart.yAxis[0].setExtremes(1,100);
http://api.highcharts.com/highcharts#Axis.setExtremes
If it is dynamic data/tick data you can set
startOnTick : false
This problem is discussed here also http://forum.highcharts.com/viewtopic.php?f=9&t=6862

You can force the y-axis to have specific tick intervals using the tickPositioner function in the y-axis e.g.
tickPositioner: function () {
var positions = [1, 25, 50, 75, 100];
return positions;
}
http://jsfiddle.net/cU2md/

Highcharts yAxis max not working

Anyone know why the yAxis still goes up to 15 despite the max value being set to 14? I tried playing around with startOnTick and maxPadding and didn't get very far.
http://jsfiddle.net/sag8W/
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
yAxis: {
min: 0,
max: 14
},
startOnTick: true,
maxPadding: 0.02,
series: [
{name: "2013/10/10",
data: [5.0, 3.0, 2.5, 3.0, 3.0, 5.0]},
{name: "2014/01/10",
data: [4.0, 1.5, 2.0, 2.0, 2.0, 4.0]}
]
});
});

You need to set the tickInterval. For some funky reason it is trying to divide the 15 points you have evenly into ticks (0 to 14 is 15 points) and it doesn't want to end on an odd value of ticks so it rounds up. This is all supposition. Anyway, try this:
yAxis: {
min: 0,
max: 14,
tickInterval: 2
},

This problem bugged me for days, and I kept hitting this page with Bing. Anwer here has been helpful, but the issue in my side was fixed following another sample, since I had static tick to set.
Here is something similar to my final result (though it can be set dynamic);
yAxis: {
tickPositioner: function () {
var positions = [0,1,2,3,4,5,6,7,8,9,10];
return positions;
}
},
Example:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/tickpositions-tickpositioner/
hope this helps.