Develop Reference

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

Bubble chart (relations between bubbles)

Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/

Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/

This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/

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 - log axis not working

I have a high chart code like this:
Highcharts.chart('linechart', {
chart: {
backgroundColor:'rgba(255, 255, 255, 0.8)',
borderRadius:5,
},
title: {
text: 'ROC Graph'
},
subtitle: {
text: 'Learning Evaluation'
},
xAxis: {
min: 0,
max: 1,
tickWidth:1,
tickPositions: [0.001, 0.01, 0.1,1]
},
yAxis: {
max: 1,
tickInterval:0.1,
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0.30
}
},
});
And my javascript code:
for(j=0; j<data.roc_buffer[i]['xs'].length/10;j++){
x_plot = data.roc_buffer[i]['xs'][10*j]
y_plot = data.roc_buffer[i]['ys'][10*j]
plot_buffer[j] = {'x':x_plot, 'y':y_plot}
}
roc_chart.addSeries({
name: data.roc_buffer[i]['plotname'],
data: plot_buffer
});
It work out fine like this
However, I want the [0.001,0.01,0.1,1] all have same width so I need to adjust the xaxis to type logarithm. So I switch my code to:
xAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
Now the line disappear...
Also my data is something like
[{x:integer,y:integer},{x:integer,y:integer},{x:integer,y:integer},...]

What I understand.
Your xAxis and yAxis both value dynamically generated.
You can set data using setData method for yAxis and setCategories for xAxis.
$('#button').click(function () {
highchart.series[0].setData([1, 2, 4, 8, 16]);
highchart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M']);});
or Check jsfiddle link
http://jsfiddle.net/ashish8833/w3o0jzL7/1/

Highcharts not plotting series correctly on secondary axis

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.