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>

How to set Highcharts labels width to 50%

I have a Highcharts' bar chart with long labels.
I would like to allow them to grow up to 50% of the width of the container.
But no matter what I would do, they are not growing to this width.
Here is an example:
https://jsfiddle.net/agex7m0o/1/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa Long Name Long Name Long Name Long Name Long Name', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels: {
overflow: 'justify'
}
},
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: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
As you can see, the width of the left side (with the labels) is clearly narrower than the chart side. The labels are wrapping already, but the left side is not growing.
Do you have any idea ?

You can play with the margin parameter by adding in your chart options:
chart: {
type: 'bar',
margin: [50,10,50,400]
},
see exemple : here
link to the API: here

In the below demo the chart yAxis width is set as 50% of the general chart container width. Is that a solution which you have been looking for?
Demo: https://jsfiddle.net/BlackLabel/z0vbcf5x/
events: {
render() {
let chart = this;
if (chartForRender) {
chartForRender = false;
chart.update({
chart: {
marginLeft: chart.chartWidth / 2
}
}, true, false, false)
}
chartForRender = true;
}
}
API: https://api.highcharts.com/highcharts/chart.events.render

How to plot line per category in highcharts?

I'm trying to figure out if there is some way to plot a line per category in highcharts, i've tried for a while following this doc and my current chart looks like this:
What i want to achieve is something like this:
with each line stoping on the next category, this way i can set "goals" per category.
My code so far
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'
},
plotLines: [{
color: 'red',
value: 300,
width: 2
}]
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Gastos',
data: [107, 31, 635, 203, 2],
color: '#f25a41'
}, {
name: 'Renda',
data: [133, 156, 947, 408, 6],
color: '#5c90f9'
}]
});

The easiest way would be to create custom marker for each category using Renderer.path() function.
API Reference:
http://api.highcharts.com/highcharts/Renderer.path
Example:
https://jsfiddle.net/809y2wcn/

Highcharts dataLabel positioning issue in FF and IE

I'm trying find how to position the labels inside the bars in this case.
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
subtitle: { text: 'Some syubtext' },
xAxis: [{ categories: ['2009','2010','2011','2012','2013'] }],
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: { stacking: 'percent',
dataLabels: {
enabled: true,
color: 'white'
}
}
},
series: [{
name: 'John',
data: [28, 23.6, 19.4, 17.5, 22]
}, {
name: 'Jane',
data: [56.7, 60.4, 64, 64.8, 60]
}, {
name: 'Joe',
data: [15.3, 15.9, 16.6, 17.7, 18]
}]
});
});
js fiddle
This works on Chrome, but FF and IE displaces the data labels.
Please advice.

adding verticalAlign: 'top' fixes the issue
dataLabels: {
enabled: true,
color: 'white',
verticalAlign: 'top'
}
fiddle amended http://jsfiddle.net/cbf74c1d/2/

Remove space in bar charts in high charts for undefined values

I'm creating a bar chart using high charts. Here is a sample: http://jsfiddle.net/anishantha87/kfg5c/3/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Europe', 'Oceania','France'],
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: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [ 203, 200,200]
}, {
name: 'Year 1900',
data: [ 408, 60,null]
}, {
name: 'Year 2008',
data: [ 732, 34,null]
}]
});
});
In that I have null value for France. It displays the bar down below the France.(not vertically aligned with the Y axis name)
Any suggestions pls?