Highcharts - Combine & superimpose columns - javascript

I found tutorials and answers about how to combine charts, superimpose them, but none about both at the same time.
Here is a picture of what I mean:
I tried some stuff, here is what I have done so far : http://jsfiddle.net/8vCEs/37/
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
tooltip: {
shared: false
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: '1',
data: [100],
grouping: false,
}, {
name: '2',
grouping: true,
stack: 1,
data: [30],
}, {
name: '3',
grouping: true,
stack: 1,
data: [20]
}]
});
});
So the problem Im confront to is to center them so they all fit together.
I tried for exemple "pointPlacement: -0.2" to the 3 charts but doesn't change the position of them
Thanks for any help.

You don't need to play with pointPlacement, here the config you need: http://jsfiddle.net/8vCEs/50/
Short explanation:
series.grouping to keep bars centered
series.pointPadding to change width of columns
series.stack to decide which series should stack
Snippet:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
tooltip: {
shared: false
},
plotOptions: {
column: {
grouping: false,
stacking: 'normal'
}
},
series: [{
name: '1',
stack: 0,
data: [100],
}, {
name: '2',
stack: 1,
pointPadding: 0.2,
data: [30],
}, {
name: '3',
stack: 1,
pointPadding: 0.2,
data: [20]
}]
});

You were close with the grouping. You can get it to look like you want by setting grouping to false for all series, and making the un-stacked series wider, by reducing the point padding of that series. Like this:
plotOptions: {
column: {
stacking: 'normal',
grouping: false,
}
},
series: [{
name: '1',
data: [100],
pointPadding: 0.05
},...
]
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
tooltip: {
shared: false
},
plotOptions: {
column: {
stacking: 'normal',
grouping: false,
}
},
series: [{
name: '1',
data: [100],
pointPadding: 0.05
}, {
name: '2',
stack: 1,
data: [30],
}, {
name: '3',
stack: 1,
data: [20]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Working example: http://jsfiddle.net/ewolden/8vCEs/48/

Related

how to show Y axis (not it label) in jquery?

I am using highchart with jquery .I am able to show X-axis with label (Apple,pears)..But I want to show Y-axis without lable .In other words I want to show a straight line on Y-axis.
here is my code
http://jsfiddle.net/3sembmfo/118/
$(function () {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
This can, and should, be resolved by options:
yAxis.lineWidth - to enable the line
yAxis.title.text - to hide the title
yAxis.gridLineWidth - to disable horizontal lines,
yAxis.labels.enabled - to disable labels
Working demo: http://jsfiddle.net/BlackLabel/3sembmfo/122/
Snippet:
yAxis: {
allowDecimals: false,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
visible: true
},
Replace your y Axis code with this. http://jsfiddle.net/3sembmfo/119/. If you have any query let me know.
yAxis: {
allowDecimals: false,
labels:{
style: {
fontSize:'0px'
}
},
title: {
text: 'Fruit',
style: {
fontSize:'0px'
}
},
visible: true
},
You have to use Highcharts.SVGRenderer and add line using load event.
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
Fiddle demo
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
},
yAxis: {
allowDecimals: false,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<div id="container"></div>

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 force display of x-axis labels in Highcharts?

I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.
I'm loading csv data from a pre HTML block.
Here's the code:
<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script> <div id="container"></div>
</body>
<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>
$(function () {
$('#chart_left_1').highcharts({
chart: {
borderColor: '#000080',
borderRadius: 0,
borderWidth: 2
},
title: {text: 'GDP Growth', margin: 0},
exporting: {enabled: false},
legend: {enabled: false},
subtitle: {text: null},
xAxis: {
},
yAxis: {
tickInterval: 2,
title: {text: null},
labels: {
formatter: function() {
return this.value + '%';
}
},
},
tooltip: {
enabled: true,
valueSuffix: '%'
},
data: {
csv: document.getElementById('gdpgr').innerHTML,
startRow: 1,
endRow: 11,
endColumn: 2,
firstRowAsNames: false
},
xAxis: {
allowDecimals: false
},
series: [{
type: 'column',
name: ' GDP growth',
color: '#000080'
},{
type: 'column',
name: 'US GDP Growth',
color: '#CCCCCC'
}]
});
});
And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/
In this case, if you dont need to use other type of xAxis than category, you can use step label's property.
xAxis: {
type: 'category',
allowDecimals: false,
labels: {
step: 1
}
},
Example: https://jsfiddle.net/otfq0dch/3/
http://api.highcharts.com/highcharts/xAxis.labels.step
the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1
https://jsfiddle.net/otfq0dch/2/
xAxis: {
allowDecimals: false,
tickInterval: 1
},
link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval
xAxis: {
type: 'category',
allowDecimals: true,
labels: {
step: 1
}
},

combining an area chart with a line chart in highcharts.js

So I have an area stacked chart:
chart: {
type: 'area',
},
plotOptions: {
series: {
stacking: 'normal',
},
area: {
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
},
},
},
},
title: {
text: title,
},
xAxis: {
type: 'datetime',
min: startDateInMS,
max: endDateInMS,
},
yAxis: {
title: {
text: yLabel,
},
},
series: data,
credits: {
enabled: false,
},
};
How do I add a line item/chart to what I already have? I have looked through the docs and they don't really have an example of combining a line with an area chart.
Thanks!
Highcharts support combining different kinds of charts like so:
http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types
series: [{
type: 'area',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'line',
name: 'John',
data: [2, 3, 5, 7, 6]
},
Combining area and line would look something like this:
http://jsfiddle.net/henrikskar/ateje82r/

MACD + High chart Graph plotting issue

I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});
Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.

Categories

Resources