I saw Highchart's timeline chart that customize each point dataLabel.
I want to add dataLabel option to set different distance for each points(data). So I added option like below code.
But when I use this code, it looks like distance option is not working. all of the dataLabel's distance is same.
How can I solve it? Did I use something wrong?
Highcharts.chart('container', {
chart: {
type: 'timeline'
},
series: [{
data: [{
date: 'Some date',
label: 'Event label',
description: 'Description of this event.',
dataLabels: {
color: '#78f',
borderColor: 'blue',
backgroundColor: '#444',
connectorWidth: 2,
connectorColor: 'blue',
distance : 80, // I add this option for different distance
style: {
textOutline: 0
}
}
},{
date: 'Another date',
label: 'Last event label',
description: 'Description of third event.',
dataLabels :{
distance : 20
}
}]
}]
});
Instead of distance that is set for all data labels you can use y property:
series: [{
data: [{
...,
dataLabels: {
y: -50,
...
}
}, {
...,
dataLabels: {
y: 120
}
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/femo49gn/
API Reference: https://api.highcharts.com/highcharts/series.timeline.dataLabels.y
Related
I want to show 2 data labels inside pie charts with drill-down. I know this is possible by overlaying 2 pie with different data labels. However, in the drill down, it's only showing 1 data labels, which is the last one I put (the first data label is being ignored by highcharts).
Here is my attempt:
https://jsfiddle.net/firstlutfi/a3v3mhef/
$('#chart').highcharts({
chart: {
type: 'pie'
},
xAxis: {
type: 'category'
},
tooltip: {
headerFormat: '<span style="font-size:10px">{series.name}</span><br>',
pointFormat: '{point.name}: <b>{point.percentage:.2f}%</b>',
percentageDecimals: 0
},
plotOptions: {
pie: {
size: '80%',
cursor: 'pointer',
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: 'jakarta_sales'
}, {
name: 'New York',
y: 5000000,
},
]
},
},
series: [{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format: '{point.percentage:.2f}%'
},
},{
type: 'pie',
name: 'Sales Details',
colorByPoint: true,
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>:<br/> ' + this.y + ' ';
}
}
}],
exporting: {
enabled: true,
},
drilldown: {
series: [
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: -30,
connectorColor: '#000000',
format:'{point.percentage:.2f}%'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},
{
name: 'Jakarta Sales',
id: 'jakarta_sales',
data: [
{name:'Car Brand A',
dataLabels: {
verticalAlign: 'top',
enabled: true,
color: '#000000',
connectorWidth: 1,
distance: 30,
connectorColor: '#000000',
format:'{point.name}:<br/> {point.y}'
},
y:800000},
{name:'Car Brand B', y:400000},
]
},]
}
});
Update:
click on the jakarta data, and you'll get this
The result that i want is to have 2 labels in the drilldown. one is the amount (on the outside of the pie), and the percentage (inside the pie).
Is anyone know how to use 2 data labels (inside and outside) every chart including the drill down?
Thank you.
I see you use workaround to render multiple-labels per point by using two pie charts. Problem with that solution is.. you can not drilldown from one pie chart to multiple pie charts (ID's are unique).
Reminder: there is also another solution: Highcharts. Pie chart. DataLabels formatter
In your case, try async-drilldown (see details in drilldown event) instead:
https://jsfiddle.net/BlackLabel/a3v3mhef/77/
Snippets:
create the event:
chart: {
type: 'pie',
events: {
drilldown: function (e) {
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[0]);
this.addSingleSeriesAsDrilldown(e.point, drilldownSeries[1]);
this.applyDrilldown();
}
}
},
enable drilldown on a point:
data: [{
name: 'Jakarta',
y: 7000000,
drilldown: true // just enabled, no ID
}, {
name: 'New York',
y: 5000000,
}]
setup series references:
var drilldownSeries = [{ ... }, { ... }];
I'm trying to create a distance between the x-axis labels and the chart in Highcharts. I tried using "distance" and "padding" but none worked.
chart: {
type: 'column'
},
title: {
text: 'Data input as column arrays'
},
data: {
columns: [
[null, 'Apples', 'Pears', 'Oranges'], // categories
['Blue', 1, 4, 3], // first series
['Black', 5, 4, 2] // second series
]
},
xAxis: {
categories: [
'First Category',
'Second Category',
'Third Category',
],
labels: {
style: {
fontFamily: 'openSans',
fontSize: '16px',
color: '#000000',
},
}
}
Here is jsfiddle: http://jsfiddle.net/aaq4zww5/2/
Thanks!
Option1: use the offset in the xAxis:
xAxis: {
...
offset: 10,
},
Option2: use y under xAxis->labels:
labels: {
...
y: 25,
},
Check jsfiddle.
I am looking for a basic example from Highcharts where the following is done
a. 3 separate graphs windows stacked on top of each other
b. combine zoom option where all three separate graphs can bee zoomed for data.
what I was looking is "highstock" data where i can add more windows.
thanks,
Bilal
You can refer this example
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
You may use any number of y-axis i.e stacked graphs
#Bial I have created a fiddle for your use-case, view the fiddle at https://jsfiddle.net/Nishith/4b33pvc2/ Its having 3 series with navigator.
code for each series is like below :
{
name : 'critical alarm',
data :data.criticalAlarmCountTimeseries,
id : 'critical',
zIndex : 1,
lineWidth:3,
color:'red',
yAxis: 0 ,
marker : {
enabled : false
}
}
You can catch afterSetExtremes on xAxis chart and call setExtremes on the other charts to "zoom".
events: {
afterSetExtremes: function() {
if (controllingChart == "chart3") {
var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;
chart1.xAxis[0].setExtremes(xMin,
xMax,
true);
chart2.xAxis[0].setExtremes(xMin,
xMax,
true);
}
}
}
Example: http://jsfiddle.net/Gv7Tg/33/
What am i working on is, to create a bell curve and a fill the curve with colour to show that you have got 50 % or 60 % etc.
What i have done till now is:
Created a bell curve using spline chart in highcharts, now I want to limit the colour inside the chart based on the user percentage. I have no idea how this can be done in the highchart, Could anyone point me in the right direction.
I have tried to change the colour based on the http://www.highcharts.com/plugin-registry/single/33/Multicolor%20series, but it have affected the bell curve.
Here is the fiddle link: http://jsfiddle.net/decs7eg1/5/
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average score'
},
legend: {
enabled:false
},
xAxis: {
categories: [
'0',
'25',
'50',
'75',
'100'
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
enabled:false
},
credits: {
enabled: false
},
plotOptions: {
enabled:false
},
series: [ {
name: 'Jane',
data: [0, 0.5, 2, 0.5, 0]
}]
});
});
You can't achieve the same output by using areaspline type of highchart
I am adding two demos one with using areaspline and other with simple line chart use according to your requirements:
areaspline: http://jsfiddle.net/decs7eg1/8/
line: http://jsfiddle.net/decs7eg1/7/
Vertical areaspline: http://jsfiddle.net/decs7eg1/10/
To do this just add these lines in your code:
zones: [{
value: 0,
color: 'red'
}, {
value: 0.5,
color: 'yellow'
}, {
value: 1,
color: 'blue'
}, {
value: 2,
color: 'green'
}]
For further references refer to this link: http://www.highcharts.com/docs/chart-concepts/series
Can you please take a look at this demo and let me know why I am not able to set the other side yAxis , as well?
$(function () {
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#5882FA',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Roads', 'Powerlines'],
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x +
' is <b>'+ this.y +'</b>';
}
},
series: [{
data: [{
name: 'Roads',
y: 200
}, {
name: 'Powerlines',
color: '#FF00FF',
y: 50
}]
}]
});
});
I find some sample on the Highcharts API and I tried to follow them on my demo but they didn't work!
Highcharts : bar chart with multiple y axes
I have corrected the problem with your code: DEMO
You will have to pass series data for each y-axis individually:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'column',
data: [7.0, 6.9],
tooltip: {
valueSuffix: ' °C'
}
}]
Well, I think you need to fix your series object. How about this:
series : [{
data : [{
name : 'Roads',
y : 200
}, {
name : 'Powerlines',
color : '#FF00FF',
y : 50
}
]
},
{
yAxis : 1,
data : [{
name : 'Roads',
y : 30
}, {
name : 'Powerlines',
color : '#FF00FF',
y : 10
}
]
}
]
Also you need to add yAxis : 1 as an id to axis (you can explicitly set the id of an axis to make sure)