Develop Reference

Highchart display single entry against each category in bar chart

I am working on highchart. I am trying to build a bar chart with a single entry against each category. Right now I am working on an example basic-bar. Below is the output
Expected Output
I want a single entry against each category. For example against April, I want only one bar not multiple and so on
Here is the working jsFiddle

you just use the parameter visible:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [
/*{
visible: false,
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
visible: false,
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
visible: false,
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, */
{
visible: true,
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Bar chart showing horizontal columns. This chart type is often
beneficial for smaller screens, as the user can scroll through the data
vertically, and axis labels are easy to read.
</p>
</figure>

Need a single border for stacked bar graph in Highcharts

I am getting a border for each data in a stacked bar graph.
ChartOptions :
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [{
y: 5,
borderColor: 'red',
borderWidth: 4
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{y: 2,
borderColor: 'red',
borderWidth: 4}, 2, 3, 2, 1]
}, {[enter image description here][1]
name: 'Joe',
data: [{y: 3,
borderColor: 'red',
borderWidth: 4}, 4, 4, 2, 5]
}]
});
codepen
I want something like this
image
Kindly help me with the correct ChartOptions which gives a single border around the bar without multiple borders around each bar.
Thanks and Regards

You can add fake series with a border and update it dynamically depending on changes on the chart or render a custom shape to simulate borders.
series: [..., {
showInLegend: false,
stacking: false,
data: [10],
grouping: false,
color: 'transparent',
borderWidth: 4,
borderColor: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/gtLm9hqk/
API Reference:
https://api.highcharts.com/highcharts/series.column
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect

If you are trying to remove the red border, here is the solution:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [{
y: 5,
borderWidth: 1
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{
y: 2,
borderWidth: 1}, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [{
y: 3,
borderWidth: 1}, 4, 4, 2, 5]
}]
});

How to add different series data for each categories in Stacked Column chart in Highcharts?

In this Stacked Column Chart I want to add different series for different categories in x axis. For example, in the category of apple i want to show aaa=1,bbb=2,ccc=3 and for the category of Oranges i want to show like eee=5,fff=4,ggg=1 and so on.Is it possible?
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

You need to set x data values, for example as the first elements in arrays:
series: [{
name: 'John',
data: [
[0, 5],
[1, 3]
]
}, {
name: 'Jane',
data: [
[1, 2],
[2, 2]
]
}, {
name: 'Joe',
data: [
[0, 3],
[2, 4]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/nh1toe8g/
API Reference: https://api.highcharts.com/highcharts/series.column.data

Render charts based on type with AngularJS components

I got a really strange problem with Highcharts in combination with Angularjs 1.6. I am using components to render graphs based on the chart type. This is a example of my json data:
"Widgets":[
{
"Id":1,
"description":"Test test",
"datasource":"Risk",
"charttype":"Bar",
"x":0,
"y":0,
"width":3,
"height":2
},
{
"Id":2,
"description":"test test 2",
"datasource":"KRI",
"charttype":"Area",
"x":3,
"y":0,
"width":3,
"height":2
},
{
"Id":3,
"description":"Some cool data",
"datasource":"KRI",
"charttype":"Heatmap",
"x":6,
"y":0,
"width":3,
"height":2
}
]
Based on Charttype I want to render the charts and I am using angular components for this. This is my angular component for a Bar chart:
angular.module("generalApp").component("chartType", {
template: "<div class=Bar></div>",
bindings: {
data: "=",
charttype: "="
},
controller: function () {
$('.Bar').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
})
}
});
And this is a component for my Area chart
angular.module("generalApp").component("chartType", {
template: "<div class=Area></div>",
bindings: {
data: "=",
charttype: "="
},
controller: function () {
$('.Area').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
}
});
On the HTML page I use the custom tag to use the component:
<chart-type data="w.datasource" charttype="w.charttype"></chart-type>
I want to bind the charttype on the widgets and based on that it must render a chart:
Condition
ng-repeat="w in dashboard.Widgets track by $index"
When I only use one chart it's working fine but when I use a more then component I get the following error in my console.
Can someone point me to the right direction?
Kind regards

It seems that the problem is that all of your components are registered using the name chartType.
They all should have a unique name, for instance: BarComponent and AreaComponent.
In your container template you can include all of the chart type components. And with a control flow directive you can specify what component should be displayed to the user. For example:
<div ng-switch="currentComponent">
<area-component ng-switch-when="area"></area-component>
<bar-component ng-switch-when="bar"></bar-component>
<div ng-switch-default>Please select a chart type</div>
</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]
}
]