I am trying to create a Column chart using Highcharts that show multiple series for one point in time only and I would like to show show the name of the series on the x-axis as well as being able to hide and show each series using the legend.
The closest I have been able to get to what I'm trying to achieve is by adding the categories and having multiple series.
xAxis: {
categories: [
'Tokyo',
'New York',
'London',
'Berlin'
]
}
and then adding multiple series with only one data point in each series
series: [{
name: 'Tokyo',
data: [49.9, null,null,null]
}, {
name: 'New York',
data: [null, 83.6,null,null]
}, {
name: 'London',
data: [null, null, 48.9,null]
}, {
name: 'Berlin',
data:[null, null, null, 42.4]
}]
The problem is that while this only shows one series for each point on the x-axis, Highcharts allocates space for each of the other series and when hiding a series only the series will be hidden not the label on the x-axis.
link to jsfiddle is here: http://jsfiddle.net/md2zk/
Set grouping: false in plotOptions, see: http://jsfiddle.net/Fusher/md2zk/5/
it's possible to hide Category along with the column.please go through the link given below . hope this will help.
http://jsfiddle.net/md2zk/633/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type: 'category',
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
},
},
plotOptions: {
series: {
grouping: false,
events: {
legendItemClick: function () {
debugger;
if (this.visible) {
this.setData([], false)
}
else {
this.setData([this.chart.series[this.index].userOptions], true);
}
}
},
borderWidth: 0,
dataLabels: {
enabled: true,
//style: {
// color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
//},
},
},
},
series: [{
name: 'Tokyo',
data: [{name : 'Tokyo',y:49.9}],
y: 49.9
}, {
name: 'New York',
data: [{name : 'New York',y:83.6}],
y: 83.6
}, {
name: 'London',
data: [{name : 'London',y:48.9}],
y: 48.9
}, {
name: 'Berlin',
data:[{name : 'Berlin',y: 42.4}],
y: 42.4
}],
navigation: {
buttonOptions: {
enabled: true
}
}
});
});
Related
is there any way to add tooltip to the stackedLabels in highcharts, like in the below example:
I have male, female as my stack names and I am dispalying them at the bottom of the chart..however in case they are long names, I'm adding ellipsis, in such case is there a way to see the entire name on hover inside tooltip?
fiddle:
http://jsfiddle.net/rq8m7e0v/
code:
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', "getete"]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
verticalAlign: 'bottom',
y:90,
enabled: true,
formatter: function() {
return this.stack;
}
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'John',
data: [53, 33, 43,63,7,83],
stack: 'male'
}, {
name: 'Joe',
data: [33, 43,43,63,73,8],
stack: 'female'
}, {
name: 'Jane',
data: [42, 54,43,62,74,84],
stack: 'male',
}, {
name: 'Janet',
data: [34, 40, 42,36,74,83],
stack: 'female',
}]
});
Highcharts doesn't have built-in tooltip for stack label, but still you can create your own tooltip for that. It's simple to add custom events to legendItem (mouseover and mouseout for example) and show that tooltip.
events: {
load: function() {
var stackLabels = this.yAxis[0].stacking.stackTotalGroup.element.children,
somePoint = this.series[0].points[0],
chart = this;
for (let i = 0; i < stackLabels.length; i++) {
stackLabels[i].addEventListener('mouseover', function() {
// show custom tooltip
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/orqyLjct/
API: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I want to fill the bullets of highcharts just like the bar of the highchart.
Please help me if anyone has knowledge of highcharts.
This is highchart function which I am using.
I want to make the first colour as the first bar as the second color as the second bar.
If you know any solution then please let me know. Thank you
var chart = new Highcharts.Chart({
chart: {
renderTo:'DimensionsChartfirst',
type:'column'
},
colors: ['#0070C0', '#C00000'],
title: {
text: 'Office data'
},
subtitle: {
text: ''
},
credits:{enabled:false},
legend:{
},
plotOptions: {
series: {
shadow:false,
borderWidth:0
}
},
xAxis:{
categories: [
'Weight',
'Height'
],
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickLength:3,
title:{
text:'Part Counts'
}
},
yAxis:{
lineColor:'#999',
lineWidth:1,
tickColor:'#666',
tickWidth:1,
tickLength:3,
gridLineColor:'#ddd',
title:{
text:'Office data',
// rotation:90,
margin:10
}
},
series: [{
name: 'MAX',
data: MaxVal,
colors: ['#0070C0'],
type: 'column',
colorByPoint: true
},{
name: 'MIN',
data: MinVal,
colors: ['#C00000'],
type: 'column',
colorByPoint: true
}]
});
You just need to remove colorByPoint: true properties in your series.
jsFiddle: https://jsfiddle.net/4zu28aqk/
API Reference: https://api.highcharts.com/highcharts/series.column.colorByPoint
series: [{
name: 'MAX',
data: MaxVal,
color: '#0070C0'
},{
name: 'MIN',
data: MinVal,
color: '#C00000'
}]
It seems like Highcharts is adding some spacing between the 1. series line start/series line end and the 2. vertical axis.
Please see the jsfiddle link and below screenshot for more details.
http://jsfiddle.net/8kbf2e1x/
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
xAxis: {
categories: ['D1', 'D2', 'D3', 'D4']
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
verticalAlign: 'bottom'
},
plotOptions: {
series: {
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
How do I get rid of this spaces? I want my series lines to expand from ened to end within the plot area with no gaps. Is it achievable with smaller number of data points? (e.g. in my case every series has only 4 data points)
check pointPlacement
when pointPlacement is "on", the point will not create any padding of the X axis.
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Fiddle demo
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]
}
]
Hi I am using the Highcharts library to create a bar chart with a cumulative plot line as demonstrated in the jsFiddle below.
CHART DEMO
I am looking to have the cumulative series represented like the red line in the following image (with cumulative values plotted on the right-most axis):
SAMPLE OF DESIRED OUTPUT
As you can see the secondary Y Axis is flipped and is displaying the series index value rather than the actual cumuative values.
Here is the current code:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null,
}
},
{
opposite:true,
title: {
text: "Cumulative"
}
}],
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}, {
name: 'Cumulative',
xAxis:1,
type:"spline",
data: [34, 732, 914, 1973, 4054]
}
]
});
How can I correct this in order to plot the series as intended?
Thanks!
What you can do is after loading add a new series based on the sum of the 2 series added at creation:
events: {
load: function () {
var s1900 = this.series[0].data;
var s2008 = this.series[1].data;
var newData = [];
if (s1900.length == s2008.length) {
for (var i = 0; i < s1900.length; i++) {
newData.push(s1900[i].y + s2008[i].y);
}
}
this.addSeries({
name: 'Cumulative',
xAxis: 0,
type: "spline",
data: newData
});
}
}
I am not sure why you want this on the opposite xAxis or why your curve in the linked image you supplied is not really the cumulative unless that is not what you really want. See live demo.
Note you are going to have to handle cases where not all points have a value or if one category is not in both series, etc etc etc.
Revised answer.
Assuming you want to have the same categories on the alternate xAxis and do not want to share the same yAxis you can do:
...
xAxis: [{
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
}, {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
opposite: true,
title: {
text: null
}
}],
yAxis: [{
min: 0,
endOnTick: false,
title: {
text: 'Population (millions)',
align: 'high'
}
}, {
min: 0,
opposite: true,
reversed: true,
endOnTick: true,
title: {
text: 'Cumulative Population (millions)',
align: 'high'
}
}],
...
This sets it up so that you have identical xAxis categories (other ways to do this). See new demo.