Datalables alignment doesnt work in Highchart Timeline - javascript

I am trying to align the data to left and right in Highchart horizontal timeline using dataLabels: {align: 'right'} But that doesnt work.
Code:
Highcharts.chart('container', {
chart: {
type: 'timeline',
inverted: true
},
title: {
text: 'Timeline of Space Exploration'
},
subtitle: {
text: 'Info source: www.wikipedia.org'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
plotOptions: {
series: {
dataLabels: {
align: 'right',
enabled: true
}
}
},
series: [{
data: [{
name: 'First dogs',
label: '1951: First dogs in space',
description: '22 July 1951 First dogs in space (Dezik and Tsygan) '
}, {
name: 'Sputnik 1',
label: '1957: First artificial satellite',
description: '4 October 1957 First artificial satellite. First signals from space.'
}, {
name: 'First human spaceflight',
label: '1961: First human spaceflight (Yuri Gagarin)',
description: 'First human spaceflight (Yuri Gagarin), and the first human-crewed orbital flight'
}, {
name: 'First human on the Moon',
label: '1969: First human on the Moon',
description: 'First human on the Moon, and first space launch from a celestial body other than the Earth. First sample return from the Moon'
}]
}]
});
Expected: To move the data left and right.

You need to use distance property:
series: {
dataLabels: {
alternate: false,
distance: -100,
enabled: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4942/
API Reference: https://api.highcharts.com/highcharts/series.timeline.dataLabels.distance

Related

how to change the point format for drill down in pie charts?

I am using a pie chart with drill down, is there any way to change the point format in tool-tip function. I want to display; first pie chart in Percentage(%) format, and then drill down data in Metric Ton (MT)format.
I am getting the data in respective formats from the back end service. Products are coming in metric Tons and remaining-percentage, actual percentage are coming in percentage.
My pie chart code is given below.
function visitorData(data){
var products = data.products;
var remainingPercentage=data.remainingPercentage;
var actualPercentage=data.actualPercentage
Highcharts.chart('current', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: data.remainingPercentage,
},
{
name: 'Actual Production Qty.',
y: data.actualPercentage,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [
]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: data.products
} ]
}
});
}
Thanks in advance.
A way to solve this is to appoint a tooltip: {pointFormatter: } to your first level series. This will override the main tooltip formatter and show you the data you want it to show.
// Create the chart
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
type: 'pie'
},
title: {
text: 'Production report of current quarter'
},
subtitle: {
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
//MT format for the lower drilldowns
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}MT</b> of total<br/>'
},
series: [{
tooltip: {
//Pointformat for the percentage series
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
name: 'Planned Production',
colorByPoint: true,
data: [{
name: 'Remaining Production Qty. ',
y: 3,
},
{
name: 'Actual Production Qty.',
y: 5,
drilldown: 'ap'
}
]
}],
drilldown: {
series: [{
name: 'production report',
id: 'po',
data: [1]
}, {
name: 'Actual Production Qty.',
id: 'ap',
data: [2]
},
]
}
});
The reason why I opted to let the first level override the tooltip is because of the construction of your drilldown, and I figure all of those drilldowns will use the same tooltip format.
Here you can find a working JSFiddle.

Highcharts - Column chart customization

I am creating column chart using Highcharts library. I am trying to custom Column chart according my requirement but two things I am unable to do.
First, bottom border of the column chart and second is column background for all the series. Look at the image below, what I need to achieve.
What I have done so far is here: jsfiddle
jQuery(document).ready(function(jQuery) {
jQuery('#portlet-content').highcharts({
credits: {
enabled: false
},
exporting: {
enabled: false
},
chart: {
type: 'column'
},
title: {
text: 'Number of Applications'
},
subtitle: {
text: 'BY COUNTRY'
},
xAxis: {
visible: false
},
yAxis: {
visible: false
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
padding: 3,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
lineHeight: '14px'
},
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
},
tooltip: {
formatter: function() {
return '<b style="color:'+this.point.color+'">'+ this.y +'</b>';
},
useHTML: true,
borderWidth: 0,
style: {
padding: 0,
fontSize: '16px'
},
shadow: false
},
series: [
{
name: "United Kingdom",
color: '#32323A',
data: [
[294]
]
}, {
name: "USA",
color: '#EB4825',
data: [
[65]
]
}
, {
name: "United Arab Emirates",
color: '#F7CC1E',
data: [
[35]
]
}
, {
name: "India",
color: '#24C746',
data: [
[23]
]
}
, {
name: "Canada",
color: '#2587EC',
data: [
[18]
]
}
]
});
});
Note: I have modified my answer to better address the specific requests in the original poster's question.
Here's what I would suggest:
Create a stacked column chart, where one of the series is a "dummy" series with which the user can't interact. This will serve as your background.
Here's a quick fiddle I worked up based on the Highcharts stacked column demo: http://jsfiddle.net/brightmatrix/v97p3eam/
plotOptions: {
column: { stacking: 'percent' }
},
series: [
/* this is the "dummy" series
set the "showInLegend" and "enableMouseTracking" attributes
to "false" to prevent user interaction */
{ name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray',
showInLegend: false, enableMouseTracking: false },
/* here's the real data; set a unique color for each
set nulls for the columns where that color/data is not needed */
{ name: 'Series 1', color: 'red', data: [2,null,null,null,null] },
{ name: 'Series 2', color: 'orange', data: [null,2,null,null,null] },
{ name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] },
{ name: 'Series 4', color: 'green', data: [null,null,null,2,null] },
{ name: 'Series 5', color: 'blue', data: [null,null,null,null,1] }
]
Please let me know if this is helpful for you!

Highchart multi axes labels not showing

I have 3 x-axis but their labels are not visible.
The whole idea is to have the bars thiner, and enought room for the labels
http://jsfiddle.net/rnz9ybuq/1/
xAxis: [
{
categories: ['01/14', '02/14', '03/14'],
title: {
text: "left column"
}
},
{
categories: ['stuff 1', 'stuff 2', 'stuff 3'],
opposite: true,
title: {
text: "1st right column"
}
},
{
opposite: true,
title: {
text: "2nd right column"
},
categories: ['thing 1', 'thing 2', 'thing 3' ]
}
],
yAxis: {
opposite: true,
min: 0,
max: 100,
labels: {
enabled: false
},
title: {
text: "Data"
}
},
I guess I'm missing something simple
You need to have reference to the xAxis (xAxis:2) in the serie.
Example: http://jsfiddle.net/rnz9ybuq/2/

How to place labels on opposite Y axis in Highchart without a second series

I currently have the following chart set up in Highcharts:
// Initialize the chart when the document loads.
$(document).ready(function() {
$('#results').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: [{
categories: [
'Injustice: Gods Among Us ★',
'Tekken Tag Tournament 2 ★',
'Super Smash Bros. Melee ★',
'Persona 4 Arena',
'King of Fighters XIII',
'Dead or Alive 5 Ultimate',
'Street Fighter X Tekken Ver. 2013',
'Soulcalibur V'
],
}],
yAxis: {
allowDecimals: false,
title: {
text: 'Votes'
}
},
series: [{
data: [
{y:1426,color:'#29A329'},{y:823,color:'#29A329'},
{y:462,color:'#29A329'},{y:305,color:'#CC0000'},
{y:181,color:'#CC0000'},{y:148,color:'#CC0000'},
{y:127,color:'#CC0000'},{y:115,color:'#CC0000'}
],
dataLabels: {
color: '#FFFFFF',
enabled: true,
inside: true
},
showInLegend: false,
name: 'Votes'
}]
});
});
This produces a chart that looks like this:
Live example.
jsFiddle
What I'd like to do is have labels on the Y Axis on the opposite side (it's a string, nothing special).
I can add another series with empty data points, and get the labels I want (I'm writing the Javascript into the page from the server side to get this effect) with the following code additions:
// Initialize the chart when the document loads.
$(document).ready(function () {
$('#results').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: [{
categories: [
'Injustice: Gods Among Us ★',
'Tekken Tag Tournament 2 ★',
'Super Smash Bros. Melee ★',
'Persona 4 Arena',
'King of Fighters XIII',
'Dead or Alive 5 Ultimate',
'Street Fighter X Tekken Ver. 2013',
'Soulcalibur V'
],
}, {
categories: [
'8/5/2013 8:59 PM',
'8/5/2013 12:59 PM',
'8/5/2013 2:59 PM',
'8/5/2013 6:59 PM',
'8/5/2013 12:59 AM',
'8/5/2013 3:59 PM',
'8/5/2013 8:23 PM',
'8/5/2013 8:19 PM'],
opposite: true,
title: {
text: 'Last vote cast at'
}
}],
yAxis: {
allowDecimals: false,
title: {
text: 'Votes'
}
},
series: [{
data: [{
y: 1426,
color: '#29A329'
}, {
y: 823,
color: '#29A329'
}, {
y: 462,
color: '#29A329'
}, {
y: 305,
color: '#CC0000'
}, {
y: 181,
color: '#CC0000'
}, {
y: 148,
color: '#CC0000'
}, {
y: 127,
color: '#CC0000'
}, {
y: 115,
color: '#CC0000'
}],
dataLabels: {
color: '#FFFFFF',
enabled: true,
inside: true
},
showInLegend: false,
name: 'Votes',
xAxis: 1
}, {
data: [0, 0, 0, 0, 0, 0, 0, 0],
showInLegend: false
}]
});
});
jsFiddle
This gets me almost exactly what I want, except for one thing, the bars are now thinner, as space was made to accommodate the fake data series that isn't meant to be shown:
The question is, how do I get the labels on the right-side without these side effects? Note that I don't necessarily need the second data series, it's just the closed I've come to a solution. As long as the bars are displayed normally, I don't mind the mechanism by which those values on the right hand side are written.
You want a linked axis http://jsfiddle.net/U5Dhw/
xAxis: [{
categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
},
{
categories: ['Fred', 'Tom', 'Bill', 'David', 'Nathan', 'Charles', 'Mike', 'Andrew'],
linkedTo: 0,
opposite: true
}],
http://api.highcharts.com/highcharts#xAxis.linkedTo

Highcharts horizontal bar chart categories are sized incorrectly

I'm having a problem with Highcharts where each bar chart category is way too tall in a horizontal arrangement.
Here is an example:
The code used to generate the chart is as follows:
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'wordchart1',
defaultSeriesType: 'bar'
},
title: {
text: 'Word Frequency Distribution'
},
xAxis: {
categories: ['LIL POP SHOP','SWEET BOX','LITTLE BABY\'S ICE CREAM','SUGAR PHILLY','Please pick one:' ],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Word Frequency Analysis',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Word Frequency Analysis',
data: [89,43,32,24,3 ] }]
});
});
Any idea what may be the problem?
Thanks!
You can also define pointWidth: http://api.highcharts.com/highcharts#plotOptions.bar.pointWidth

Categories