Develop Reference

Highcharts Grouped stack x.axis name + category name

I am trying to get my highcharts graph to look like this or similar to this.
I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.
sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -0,
style: {
fontSize: '10px',
align: 'Right',
}
},
categories: [{
name: "Case A",
categories: ["Male", "Female"]
}, {
name: "Case B",
categories: ["Male", "Female"]
}]
},
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [5,3,4,5],
stack: 'StackA'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackA'
},{
name: 'x',
data: [5,3,4,5],
stack: 'StackB'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackB'
}
]
});

To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.
API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack
http://api.highcharts.com/highcharts/xAxis.labels.x
Example:
http://jsfiddle.net/sjtdgq9L/

Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.
Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ["Case A", "Case B","Case C", "Case D"],
labels: {
rotation: -90,
x: -60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 1,
tickLength: 60,
},
{
categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
opposite: false,
labels: {
rotation: 0,
x: 60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 0,
}],
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [1,8,9,16],
stack: 'StackA'
}, {
name: 'y',
data: [1,7,10,15],
stack: 'StackA'
},{
name: 'x',
data: [3,6,11,14],
stack: 'StackB'
}, {
name: 'y',
data: [4,5,12,13],
stack: 'StackB'
},
{
name: '',
data: [0,0,0,0,0,0,0,0],
showInLegend: false,
stack: 'StackB',
xAxis: 1
}
]
});

Change your series to:-
series: [{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
},{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
}
]

How to join the graph points using curve or arc

I am using highcharts to make a graph . My graph is look like below,
I want to merge the points using an Arc or Curve. So my excepted output look like below,
Also i am using PlotLines to draw a line in Yaxis. I want to mark the point in the PlotLine . I am using the following code to make this graph .
$(document).ready(function () {
var left = [[4,7],[9,2]];
var right = [[2,2],[9,9]];
Highcharts.chart('container', {
title:{
text:''
},
tooltip: { enabled: false },
exporting: { enabled: false },
credits: {enabled: false},
plotOptions: {
series: {
pointStart: 1
}
},
xAxis: {
max: 10,
min: 1,
tickInterval: 1
},
yAxis: {
max: 11,
min: 0,
tickInterval: 1,
plotLines: [{
color: 'black',
value: 5.5,
width: 2
}],
},
series: [{
showInLegend: false,
data: left
},
{
showInLegend: false,
data: right
},
],
});
});

HighCharts dual x-axis with percent and date

I have a requirement to display completion percentage on a bar chart with the start date for each of those project as line chart.
Now, for achieving this I have created a chart with dual y-axis.
1 - axis-1 shows progress with bar-chart. With max: 100 - avoid displaying values > 100.
2 - axis-2 shows start dates with a line chart
With this set up, I expect the bar to go all the way to the end when value is 100 and the secondary axis to adjust with in it. Instead the bar stops at about 3/4 of the way and line chart actually plots point beyond bar chart's 100%.
Following jsfiddle would display the prominently.
var completionChart = $('#Chart').highcharts({
title: {
text: 'Project QUAL Status - SD/uSD'
},
xAxis: {
categories: window.xCategories,
crosshair: true
},
yAxis: [{
title: {
text: '% Completion'
},
min: 0,
max: 100,
labels: {
enabled: false
},
gridLineWidth: 0
}, {
"title": {
"text": "Start Date"
},
type: 'datetime',
opposite: true
}],
tooltip: {
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
borderWidth: 1,
borderColor: '#000000',
useHTML: true,
positioner: function () {
return { y: 317 };
},
shared: false,
style: {
padding: 5
}
},
plotOptions: {
bar: {
groupPadding: 0
},
series: {
dataLabels: {
enabled: true,
align: 'left',
overflow: 'none',
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
},
formatter: function () {
if (this.y <= 100)
return Math.round(this.y) + '%';
}
},
cursor: 'pointer'
}
},
credits: {
enabled: false
},
series: [{
index: 0,
name: 'Completion %',
data: completionpercent,
showInLegend: false,
type: 'bar'
}, {
data: startDate,
type: 'spline',
name: 'Start Date',
connectNulls: true,
color: '#2F4367',
lineWidth: 3,
yAxis: 1,
index: 1,
}]
});
The width of the chart is set and I can not change it without affecting the overall design of the application. Changing the width does help sometimes, but I want a solution that does not depend on the chart width to work.

You need to set the alignTicks property to false in order to achieve this.
Updated fiddle:
https://jsfiddle.net/jlbriggs/mup6vL8d/2/
Reference:
http://api.highcharts.com/highcharts/chart.alignTicks

HighCharts not plotting decimal values in x-axis

I'm trying to plot decimal values on my x-axis, but each of my data points gets placed only on my major tick marks (at whole numbers). I'm using an array of [x,y] paired data, e.g. [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]]
What is happening, is the first item get's placed over the starting value (35), the second value (x 35.21) is being placed directly over 36, the next value (x 35.72) gets placed over 37, etc. It's as if the x-value in my data is being ignored.
Here is the chart's setup attributes:
chart: {
zoomType: 'x',
spacingRight: 10,
type: 'area'
},
title: {
text: null
},
xAxis: {
allowDecimals: true,
tickInterval: 1,
minorTickInterval: 10,
labels: {
step: 1
},
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
pointStart: 35,
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
//index: 1,
name: 'trajectory$',
data: progressUpdateData,
}
]
How do I get the x-values plotted properly?
Thanks

Here's a fiddle showing your points in-between whole numbers
http://jsfiddle.net/LLExL/2462/
plotOptions: {
area: {
pointStart: 35,
pointPlacement: 'between',
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
}
You might want to look at http://api.highcharts.com/highcharts#plotOptions.area.pointPlacement as maybe you have this set to "on" instead of "between" somewhere?

Will's answer didn't work for me. However, setting a min and a max to yAxis did. If you have these values [[35,1500], [35.21,2000], [35.72,3500], [36.32,4000]], you simply set a minimum of 35 and a maximum of 37.
This
yAxis: {
min: 0,
title: {
text: 'total$'
}
},
became this
yAxis: {
min: 35,
max: 37,
title: {
text: 'total$'
}
},

How do I show multiple line from dynamic data using javascript in highchart

I have a chart that is getting user input selection from a drop down list in jsf and generate chart based on the item selection. It is working perfectly. But If I want to select multiple items at a time and want to show multiple lines at a time, how is that possible? I know I have to use another jsf component instead of dropdown list. But I am not getting how can I pass multiple data series at the same time to highcharts. The sample code I used to generate chart based one single item selection is as following:
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 20
},
title: {
text: ''
},
xAxis: {
startOnTick:true,
showFirstLabel: true,
endOnTick : true,
showLastLabel:true,
categories: dateAndTimeArray,
tickInterval: 20,
labels:{
rotation:0.1,
align: 'left',
step: 12,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series: [{
type: 'line',
name: 'Value',
/* pointInterval: 0.75 * 3600 * 1000,
pointStart: Date.UTC(2013, 1, 1), */
data: chartData,
marker: {
enabled: false
}
}]
});
});

You do not include your code for updating the chart with the data selected. So, this is just a general answer. The highchart series object can contain multiple elements:
series: [{series 1}, {series 2}]
You could get the list of the selected items in your ddl and then iterate over your data sets to find matches and use that to addSeries.