It is possible to stack a line on an area or an area on a line?
If this is not possible, is it planned to do later?
Best regards,
Gaël
(Update) Try to modify the exemple : highcharts_doc/demo/area-stacked
Replace a area by a line like this : http://jsfiddle.net/uq9HM/
type: 'line',
stacking: 'normal',
I can't stack line on area or area on line.
highcharts_doc/demo/combo-dual-axes is not a an answer is you wan't stack line and area.
There's a few demos of this on the HighCharts website... take a look here, for example: http://www.highcharts.com/demo/combo-dual-axes
You can see the code by clicking "view options" or "edit in jsFiddle."
did you check with arearange type of graph
type: 'arearange',
here is a jsfiddle http://jsfiddle.net/3yg8b/
hope this will be useful for you
Nope, it's not supported. You can stack only the same series type. However, you can set transparent color for area, see: http://jsfiddle.net/uq9HM/1/
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
fillColor: 'rgba(0,0,0,0)',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
Related
Can anyone show me jsfiddle example how to make dual y-Axis on the left side of a column chart for high chart (html5)?. P/S i know how to make multiple y-Axis on the right so no need for this
That's the solution:
Highcharts.chart('container', {
chart: {
type: 'column'
},
yAxis: [{
title: {
text: ''
}
}, {}],
series: [{
yAxis: 0,
data: [
439,
525,
571,
696,
970,
119,
137,
154
]
}, {
yAxis: 1,
data: [
234,
123,
444,
322,
543,
657
]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Demo:
jsfiddle.net/BlackLabel/fhgs4cpd
Highcharts seems to create numbers that are not inside categories. Is there a way to auto-adjust data to fit into the categories.
this.options = {
chart: {
type: 'line'
},
title: {
text: 'Line Test Chart'
},
subtitle: {
text: ''
},
xAxis: {
categories: [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
crosshair: true
},
yAxis: {
stackLabels: { enabled: true}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}'
},
plotOptions: {
column: {
stacking: 'normal',
grouping: false,
dataLabels: {enabled: true},
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Construction--Spending Non-Residential',
data: [100, 99, 98, 99, 99, 100, 99, 97, 98, 99, 100, 99, 97, 99, 98, 99]
},{
name: 'Construction--Spending Residential',
data: [100, 98, 99, 97, 96, 98, 100, 97, 98, 96, 98, 97, 98, 100, 98, 97]
}]
};
}
options: Object;
See: Plunker Example
Image Example of what I am trying to achieve:
Image Link
It happens, because in your case you have more points that categories defined in the categories array and pointInterval is equal 1. You can for example change xAxis type to 'datetime' and set different pointInterval (e.g. 6 months) but it is up to you how you arrange your data.
API Reference:
http://api.highcharts.com/highcharts/xAxis.type
http://api.highcharts.com/highcharts/plotOptions.series.pointStart
http://api.highcharts.com/highcharts/plotOptions.series.pointInterval
Example:
https://plnkr.co/edit/KBDyCQsEPXNc3GUtUukr?p=preview
For this kind of chart here is jsFiddle. I want to keep the data labels for the every series on the chart. But I can't figure out how I can handle this overlapping issue.
First I was unable to see labels for every series, with this option allowOverlap: true I can see lables but as they are overlapping. I can't figureout how to present chart in readable way.
bar: {
dataLabels: {
enabled: true,
allowOverlap: true,
crop: false
}
}
Move data labels using dataLabels.y.
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2],
dataLabels: {
y: -5
}
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34],
dataLabels: {
y: 4
}
}]
example: http://jsfiddle.net/VbecE/23/
I am trying to plot column + line chart combined using Highcharts.
Similar to this example: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/
but, I wanted to plot the line points per bar instead of per xAxis label. Not sure if this is even doable?
I tried to give it a shot but no success!
https://jsfiddle.net/e5e6bcfL/6/
Here is the xAxis categories and series data:
xAxis: {
categories: ['John', 'Ginni', 'Vicki', 'Alan', 'Alic']
}
...
series: [{
name: 'Male',
data: [10, 1, 8, 7, null]
}, {
name: 'Female',
data: [null, 12, 9, 2, 7]
},
{
yAxis: 1,
name: 'avgAge',
type: 'spline',
// this data is per xAxis category and per name/legend
// eg John Male avgAge is 35, Ginni Female avgAge is 30
data: [35, 18, 30, 28, 26, 32, 25, 36]
}]
Any help is appreciated.
This picture should say it all. I'm trying to implement a bubble chart with HighCharts (basically a scatter plot with marker size changing based on some metric). Sadly, some of my bubbles are trying to escape the chart, overflowing the axis and making things look messy and hard-to-read. Any way to prevent this? Obviously I could manipulate the range of the axes, but I'd rather just hide the overflowing part of the bubble. Besides, this is not an option if the x-axis is required to start at 0 (for example). Pics:
Overflow (Highcharts):
No Overflow (Chart director). This is what I want:
I advice to try to use v3.0 beta release which should solve your problem. Please take look at example:
http://jsfiddle.net/g8JcL/68/
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
minPadding:0,
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [ {
data: [
[42, 38, 500],
[6, 18, 1],
[0, 93, 505],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
]
}]
});