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 = [{ ... }, { ... }];
There is an overlapping issue when I tried to draw two yAxis.plotLines on column chart.
The label of plotLines has been covered/overlapped by columns.
Please see the screenshot as below
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy',
height: 400
},
title: {
text: null
},
xAxis: [{ // Suppier names xAxis
max: 9.3,
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
labels: {
rotation: -90,
}
}],
yAxis: [{ // Primary yAxis (Sales)
title: {
text: '<span class="axis-label">Sales Value (AED)</span>',
useHTML: true,
style: {
color: '#89A54E'
}
},
min: 0,
max: 190234
}, { // Secondary yAxis (Margin %)
title: {
text: '<span class="axis-label">Margin</span>',
useHTML: true
},
labels: {
format: '{value}%'
},
opposite: true,
min: 0,
max: 22,
alignTicks: false,
gridLineWidth: 0,
plotLines: [{
value: 11.66000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '11.66%',
align: 'right',
style: {
color: 'red'
}
}
}]
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
pointWidth: 25
},
column: {
colorByPoint: true
},
line: {
dataLabels: {
enabled: true,
format: '{y}%',
style: {
fontWeight: 'bold',
color: '#000000',
}
//style: 'background-color:rgba(255,0,0,0.5);'
//backgroundColor: '#FEFEFE',
//shadow: true
}
}
},
series: [{
name: 'Sales Value',
color: '#FFA500',
type: 'column',
data: [104833.6400, 38023.0500, 53165.2200, 21674.0000, 37098.4700, 42679.6700, 23127.3300, 34588.5000, 33380.0000, 15453.0000],
tooltip: {
valuePrefix: 'AED'
}
}, {
name: 'Margin After Discount (%)',
color: 'lightblue',
yAxis: 1,
data: [12.10, 22.10, 9.40, 13.40, 10.90, 10.60, 9.70, 8.50, 8.00, 11.90],
tooltip: {
valueSuffix: '%'
}
}]
});
});
So, my question is, is there a way to allow overlapping in this case? However, I don't want to change the max value of xAxis.
Here is my testing link:testing link
Thanks
You need to add zIndex to plot lines like you did for the first line - Fiddle
It looks like you are using CSS properties in Javscript.
I am not familiar with the package you are using, but there is usually an 'opacity' property that can define the element's visibility.
For example,
Set the opacity of the red textbox to 0. This will make it invisible.
When you want to see it, set the opacity to 1.
The bars on top are automatically set to 1, because every element has opacity 1 by default.
plotLines: [{
value: 11.66000,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '11.66%',
align: 'right',
style: {
color: 'red',
opacity: 0
}
}
Here's a column chart - https://jsfiddle.net/kx8qqh2e/
When you hover on a column, it shows a nice tooltip. I want to show the tooltips on all the columns at all times without having the user to hover over them. How can I achieve this?
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b>'
},
series: [
{
colorByPoint: true,
data: [
{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}
]
}
]
};
$('#categorywise-apf-graph').highcharts(chart_data);
For the sake of clarity and posterity:
You can turn off the standard tooltip, and use the dataLabels to accomplish your goal.
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
By default, a small label with the y value of the column will be placed above the column.
You can use the extensive configuration options, and the formatter function, to customize this label in a wide variety of ways, making it more like the standard tooltip
Example of a highly customized version of the dataLabel:
Code:
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
crop: true,
shape: 'callout',
backgroundColor:'rgba(0,0,0,0.8)',
borderColor: 'rgba(0,0,0,0.9)',
color: 'rgba(255,255,255,0.75)',
borderWidth: .5,
borderRadius: 5,
y: -10,
style: {
fontFamily: 'Helvetica, sans-serif',
fontSize: '10px',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<strong>'+this.series.name+'</strong>'
+'<br/>Group: <strong>'+ this.x+'</strong>'
+'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
}
}
}
},
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/
Output:
[{ EDIT --
And, since having big labels like this can be distracting when what you really want to do is just see the data plotted, here's a version with a button to toggle the visibility of the labels:
Fiddle:
http://jsfiddle.net/jlbriggs/5t50dLow/4/
Code:
<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
var enabled = chart.series[0].options.dataLabels.enabled;
console.log(enabled);
chart.series[0].update({ dataLabels: { enabled: !enabled }});
});
-- /EDIT }]
Hopefully This Fiddle answers your question.
The effect you want was achieved by using the plotOptionsAPI link here directive in highcharts.
$(document).ready(function() {
var chart_data;
chart_data = {
chart: {
type: 'column',
backgroundColor: '#FBFBFB',
plotBackgroundColor: '#FBFBFB'
},
title: {
text: '<b>Category-Wise APF</b>',
verticalAlign: 'bottom',
useHTML: true,
style: {
color: '#454545',
fontSize: '14px'
},
y: 13
},
xAxis: {
type: 'category'
},
yAxis: {
labels: {
enabled: false
},
title: '',
gridLineColor: '#EFEFEF'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'left',
enabled: true
}
}
},
series: [{
colorByPoint: true,
data: [{
name: 'Sports & Fitness',
y: 1.34,
color: '#2E91A4'
}, {
name: 'Fashion Apparels',
y: 1.29,
color: '#3196A5'
}, {
name: 'Women\'s Clothing',
y: 1.24,
color: '#2F9BA6'
}, {
name: 'Footwear',
y: 1.23,
color: '#319FA7'
}, {
name: 'Clothing & Apparels',
y: 1.21,
color: '#34A3A8'
}, {
name: 'Audio Equipments',
y: 1.20,
color: '#36A3A8'
}, {
name: 'Home Decor',
y: 1.13,
color: '#38ADAA'
}, {
name: 'Health & Personal Care',
y: 1.12,
color: '#38B1AB'
}, {
name: 'Mobile Accessories',
y: 1.12,
color: '#39B7AB'
}, {
name: 'Computer Accessories',
y: 1.11,
color: '#3DBBAD'
}]
}]
};
$('#categorywise-apf-graph').highcharts(chart_data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>
I am having trouble using the fillColor property in the highchairs api. Below is my code. I have tried setting the fillColor property with a rgb value and by setting it equal to a color. For example, I tried fillColor: "blue",. No matter what I try I am not getting any fillColor for my line chart. I am able to change the line color and the color of the markers.
<script>
$(function() {
$('#container').highcharts({
credits : {
enabled: false
},
exporting:
{
enabled: false
},
chart: {
type: 'line'
},
title: {
text: "Progress"
},
subtitle: {
text: 'Village Print & Media'
},
xAxis: {
title:{
margin: 50,
text: "February"
},
categories: ["2/3", "2/6", "2/9", "2/12", "2/15", "2/18", "2/21", "2/24", "2/27"]
},
yAxis: {
title: {
text: "Points"
}
},
plotOptions: {
series: {
color: "black",
fillColor: "#00FF00",
fillOpacity: 0.7,
},
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle',
borderWidth: 2
},
series: [{
name: 'Points Ray',
data: [5, 10, 15, 17, 25, 30, 34, 35, 50]
}]
});
});
</script>
I am using High-charts to show pie charts, can any one tell me how can I remove this white border around the radius. My code is given below also the screen shot image of chart.
I have no lot of experience with high-charts if anyone know this please help me. The documentation is also very tough to read and understand
$(function () {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor:'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%']
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [
{
name: 'Incoming',
y: 40,
color: '#87b22e'
},
{
name: 'Outgoing',
y: 30,
color: 'black'
},
{
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function () {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>
You need to set the plotOptions.pie.borderWidth property to 0:
$(function() {
$('#cashflow_graph').highcharts({
chart: {
type: 'pie',
backgroundColor: 'red',
},
title: {
text: false
},
yAxis: {
title: {
text: false
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
center: ['50%', '50%'],
borderWidth: 0 // < set this option
},
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
},
},
credits: {
enabled: false
},
tooltip: {
enabled: false,
valueSuffix: '%'
},
series: [{
name: 'Cash Flow',
data: [{
name: 'Incoming',
y: 40,
color: '#87b22e'
}, {
name: 'Outgoing',
y: 30,
color: 'black'
}, {
name: '',
y: 30,
color: 'white'
}
],
size: '80%',
innerSize: '80%',
dataLabels: {
enabled: false,
formatter: function() {
return false;
}
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts-more.src.js"></script>
<div id="cashflow_graph" style="height: 300px; width:100%;"></div>