We Keep Coding

Highcharts multiple series remove reserved space

So I've been trying to find a way to do this properly, but as far as I understand it's not possible as of now. Hoping that someone might prove me wrong.
Some background:
I'm trying to plot a timeline to keep track of tickets in Jira. No worries getting the data in and drawing each item on separate rows since highcharts is pretty much doing this for me.
A bit more advanced:
Going a little further to enhance the viewing experience I would like to group the different items based on something (in my case a single component in Jira), give items in the same group the same color so that the viewer can see that some thing might be related.
Even this is really simple to do by using multiple series together with categories.
The problem:
So when doing the grouping using categories and multiple series (one item/series) the plotting is starting to behave weird.
It seems like each one of the categories (axes) is reserving space for each series, even if one category might only have a single item in it.
This creates way too much whitespace, forcing the items to get really narrow.
See fiddle here
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/modules/xrange.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<div id="container"></div>
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Highcharts X-range'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true
},
series: [{
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0
}]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 2
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
},]
},{
data: [{
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 2
},]
}]
});
What I want:
Instead of creating a lot of whitespace I want either the width of each item to be relative to the space available in the group, or if the group axes themselves could adjust their width according to items inside (and all items is the same width).
I've found a few similar questions, but not a proper solution.
In this github issue the solution is to set grouping to false, but by doing that items in the same category will overlap instead of having their own row.
Would really appreciate if someone could help me out!

Such behavior is not supported in Highcharts by default, but I created some experimental workaround. We can change the sizes and positions of the points based on calculated values:
events: {
render: function() {
var series = this.series,
categoryWidth = this.yAxis[0].toPixels(2) - this.yAxis[0].toPixels(1),
pointWidth,
rectEl,
y,
levels = [];
Highcharts.each(series, function(s) {
if (!levels[s.yData[0]]) {
levels[s.yData[0]] = [s.index]
} else {
levels[s.yData[0]].push(s.index)
}
});
Highcharts.each(levels, function(level) {
if (level.length > 1) {
pointWidth = categoryWidth / level.length;
y = series[level[0]].points[0].shapeArgs.y;
Highcharts.each(level, function(index) {
rectEl = series[index].points[0].graphic.element.children[0];
rectEl.setAttribute('height', pointWidth);
rectEl.setAttribute('y', y);
y += pointWidth;
});
}
});
}
}
Live demo: http://jsfiddle.net/BlackLabel/y8uqsx5h/

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/

How to create legend for Plotlines with Highstock of Highcharts?

I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}

As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});

As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/

Javascript Plotly box plot issue

I want to display a box plot using Plotly Javascript library.
I set the type of chart box but it shows a line.
var data = [
{
y: [0, 1, 1, 2, 3, 5, 8, 13, 21],
boxpoints: 'all',
jitter: 0.3,
pointpos: -1.8,
type: 'box'
}
];
Plotly.newPlot('myDiv', data);
JSFiddle

Box plots are not part of the basic plotlyjs bundle.
You'll need to upgrade to plotlyjs advanced.

Where to find charts plug-in like this?

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.