Develop Reference

Place percentage labels inside each slice using Highcharts' 3D Pie Chart

I'm using Highcharts v9.2.2. Placing the labels on top of the slices for the regular Pie Chart works without problems, but switching to the 3D variant messes up the placement as demonstrated below:
Regular Pie chart
$(function() {
$('#container').highcharts({
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
y: 100,
options3d: {
enabled: true,
alpha: 65,
fitToPlot: false,
beta: 0
}
},
title: {
text: 'Regular Pie'
},
plotOptions: {
pie: {
y: 1,
shadow: true,
center: ['50%', '50%'],
borderWidth: 0,
showInLegend: false,
size: '80%',
data: [{
"name": "First slice",
"y": 100,
"sliced": true
},
{
"name": "Second slice",
"y": 100,
"sliced": true
},
{
"name": "Third slice",
"y": 70,
"sliced": true
},
{
"name": "Fourth slice",
"y": 100,
"sliced": true
},
{
"name": "Fifth slice",
"y": 100,
"sliced": true
}
]
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
type: 'pie',
name: 'Browser share',
dataLabels: {
color: 'white',
distance: -20,
formatter: function() {
if (this.percentage != 0) return Math.round(this.percentage) + '%';
}
}
},
{
type: 'pie',
name: 'Browser share',
dataLabels: {
connectorColor: 'grey',
color: 'black',
y: -10,
softConnector: false,
connectorWidth: 1,
verticalAlign: 'top',
distance: 20,
formatter: function() {
if (this.percentage != 0) return this.point.name;
}
}
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
3D Pie Chart
$(function() {
$('#container').highcharts({
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
y: 100,
options3d: {
enabled: true,
alpha: 65,
fitToPlot: false,
beta: 0
}
},
title: {
text: '3D Pie'
},
plotOptions: {
pie: {
y: 1,
shadow: true,
center: ['50%', '50%'],
borderWidth: 0,
showInLegend: false,
depth: 35,
size: '80%',
data: [{
"name": "First slice",
"y": 100,
"sliced": true
},
{
"name": "Second slice",
"y": 100,
"sliced": true
},
{
"name": "Third slice",
"y": 70,
"sliced": true
},
{
"name": "Fourth slice",
"y": 100,
"sliced": true
},
{
"name": "Fifth slice",
"y": 100,
"sliced": true
}
]
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
type: 'pie',
name: 'Browser share',
dataLabels: {
color: 'white',
distance: -20,
formatter: function() {
if (this.percentage != 0) return Math.round(this.percentage) + '%';
}
}
},
{
type: 'pie',
name: 'Browser share',
dataLabels: {
connectorColor: 'grey',
color: 'black',
y: -10,
softConnector: false,
connectorWidth: 1,
verticalAlign: 'top',
distance: 20,
formatter: function() {
if (this.percentage != 0) return this.point.name;
}
}
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Is there a way to properly do this for the 3D chart? I've tried tweaking distance in series[0].dataLabels but couldn't achieve a much better result than the provided example.

This behaviour occurs due to the following issue:
https://github.com/highcharts/highcharts/issues/3259
As a workaround you can move dataLabels with attr() method:
function(chart) {
var x, angle, centerX = chart.series[0].center[0],
rad = chart.series[0].center[2] / 3;
Highcharts.each(chart.series[0].data, function(p, i) {
angle = p.angle;
x = centerX + rad * Math.cos(angle);
p.dataLabel.attr({
x: x,
'text-anchor': 'right'
});
})
}
Demo:
https://jsfiddle.net/BlackLabel/2z4nfybg/

Vue tool tip in apex bar chart for label name Y axis

If word length is too long, I want to show the Vue tooltip or on hover, I need to show the full name of the label. I tried to research a lot, but nothing worked.
https://apexcharts.com/docs/multiline-text-and-line-breaks-in-axes-labels/#
https://github.com/apexcharts/apexcharts.js/issues/2281.
I want when the user hovers on the Y-axis label, I need to show the full text.
I am using bar chart
Here is my response from API
[
{
"name": "Meetings",
"data": [
15,
05,
10,
10,
10,
10,
10,
10,
10,
10
]
},
{
"name": "R & D",
"data": [
10,
10,
10,
10,
10,
10,
10,
10,
10,
10
]
}
]
// **************** Sector Chart ***************** //
export default {
data() {
return {
// teams progress
teamProgressFilter: "week",
teamsOverviewSeries: [],
teamsOverviewOptions: {
chart: {
type: "bar",
height: 456,
stacked: true,
stackType: "100%",
},
plotOptions: {
bar: {
horizontal: true,
barHeight: "40%",
columnWidth: "60%",
},
},
stroke: {
width: 2,
colors: ["#fff"],
},
title: {
text: "",
},
xaxis: {
type:'category',
categories: [],
labels: {
show: false,
},
},
yaxis: {
show: true,
labels: {
show: true,
align: 'left',
minWidth: 50,
maxWidth: 300,
style: {
fontSize: '12px',
},
offsetX: 10,
offsetY: 0,
rotate: 0,
title : "jhashvcshacas sagfuasf ashdgaug ",
formatter: (value) => {
return (value.length > 11)?
value.slice(0,11)+'..':value
},
},
},
tooltip: {
x: {
show: true,
},
y: {
title: {
formatter: (seriesName) => "
<span>" + seriesName + ":</span>",
},
formatter: function (val) {
return val + " hours";
},
},
marker: {
show: false,
},
onDataSetHover: {
highlightDataSeries: false,
},
},
fill: {
type: "pattern",
colors: ["#0081C1", "#FF776A", "#F7B01D"],
pattern: {
opacity: 0.5,
style: "slantedLines",
},
},
legend: {
position: "bottom",
horizontalAlign: "center",
markers: {
radius: 9,
fillColors: ["#0081C1", "#FF776A", "#F7B01D"],
},
},
dataLabels: {
textAnchor: "end",
style: {
fontSize: "12px",
fontFamily: "Source Sans Pro",
colors: ["#0684C3", "#FF776A", "#F7B325"],
},
background: {
enabled: true,
borderRadius: 3,
opacity: 1,
},
},
},
};
},
methods: {
loadTeamOverview() {
return [
{
"name": "Meetings",
"data": [
15,
05,
10,
10,
10,
10,
10,
10,
10,
10
]
},
{
"name": "R & D",
"data": [
10,
10,
10,
10,
10,
10,
10,
10,
10,
10
]
}
];
},
filtered() {
this.loadTeamOverview();
},
departmentArray(departments) {
return departments.map((dept) => dept.department);
//return departments.map((dept) => this.convertToArray(dept.department));
},
},
created: function () {
this.loadTeamOverview();
},
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.29.0/apexcharts.min.js"></script>
<md-card class="bpmt_card mb-15">
<div id="chartTeamProgress">
<apexchart
ref="realtimeChart"
type="bar"
height="400"
:options="teamsOverviewOptions"
:series="teamsOverviewSeries"
></apexchart>
</div>
</md-card>

Column Chart with lines - Combo chart customization

Which JS library is best to do the above type of chart ?
I want to combine clustered column chart with line chart as shown in the picture above.
My requirement is each column should have a low and high value set

Please use highcharts for this.
please refer JSFiddle for the code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: "container",
type: "column"
},
plotOptions: {
series: {
pointWidth: 25
},
line: {
marker: {
type: 'dot'
}
}
},
title: {
text: null
},
series: [{ "name": "india", "data": [{ y: 1, color: 'red' }, { y: 3, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 2, color: '#965129' }] },
{"name": "usa", "data": [0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3, color: '#f1da37' }, { y: 1, color: '#965129' }] },
{ "name": "china", "data": [0, 0, 0, 0, 0, 0, 0, 0, { y: 3, color: 'red' }, { y: 2, color: '#f99820' }, { y: 3.1, color: '#f1da37' }, { y: 1.9, color: '#965129' }]}, { "name": "target", "data": [3, 1, 3, 2, 2, 1, 1.9, 2.4, 2.8, 1.9, 2.9, 1.6], yAxis: 1, type: 'line' },
{ "name": "baseline", "data": [1.3, .1, 1.3, 0, 1.2, .5, 1.2, .2, .5, 1.2, 2.1, .2], yAxis: 1, type: 'line' }],
xAxis: {
categories: [{ "name": "india", "categories": ["june 2016", "july 2016", "august 2016", "september 2016"] }, { "name": "usa", "categories": ["may 2017", "june 2016", "july 2016", "august 2016"] }, { "name": "china", "categories": ["may 2017", "june 2017", "july 2017", "august 2017"] }]
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
}
}, ,
labels: {
format: '',
style: {
color: '#4572A7'
}
},
opposite: true
}],
});
});

highcharts with json data

I am new to these things. Using the code from URL: http://jsfiddle.net/sujay/UMeGS/ , I was trying to create a chart with my own data.
Using REST web service, I am able to get my data from database, which means when I click on the following link 'localhos:48095/WebApplication22/webresources/sample22.test15' , I am getting json data as follows
[
{
"id": 1,
"status": "stopped",
"unit": "a",
"val": 24
},
{
"id": 2,
"status": "working",
"unit": "a",
"val": 59
},
{
"id": 3,
"status": "turning",
"unit": "a",
"val": 2
},
{
"id": 5,
"status": "transport",
"unit": "a",
"val": 6
},
{
"id": 6,
"status": "stopped",
"unit": "b",
"val": 336
},
{
"id": 7,
"status": "working",
"unit": "b",
"val": 212
},
{
"id": 9,
"status": "turning",
"unit": "b",
"val": 23
},
{
"id": 10,
"status": "transport",
"unit": "b",
"val": 1
}
]
I have slightly modified code from http://jsfiddle.net/sujay/UMeGS/, in which I have used getJSON() to get data.
Below is the code.
$(function () {
$.getJSON('localhos:48095/WebApplication22/webresources/sample22.test15', function (data) {
var seriesData = [];
var xCategories = [];
var i, cat;
for (i = 0; i < data.length; i++) {
cat = 'Unit ' + data[i].unit;
if (xCategories.indexOf(cat) === -1) {
xCategories[xCategories.length] = cat;
}
}
for (i = 0; i < data.length; i++) {
if (seriesData) {
var currSeries = seriesData.filter(function (seriesObject) {
return seriesObject.name == data[i].status;
});
if (currSeries.length === 0) {
seriesData[seriesData.length] = currSeries = {
name: data[i].status,
data: []
};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {
name: data[i].status,
data: [data[i].val]
}
}
}
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: xCategories
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: seriesData
});
});
});
});
But I am unable to see anything. Chart is not displayed. Please help me on this thing.

How to get all json values in line chart

I have many Json values, using them I am going to create a line chart but it shows only one value in the chart. I am a newbie to javascript and have an idea to plot all values in chart. please anybody give jsfiddle example for this issue.
HTML code
<div id="chartContainer" class="chart">
Script
$.getJSON('dashboard_summary.php?', function(data) {
var len = data.length
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
};
Json data
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}

Based on your code, I can see why the chart shows only one point, which is the last data point of those points expected to be shown on the chart. Here is the problem:
var len = data.length;
/* Loop through each item in the data */
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});
So you end up drawing many charts with the last chart which has the last data point to replace all the previous charts.
Instead, you should adjust the foreach block as follow and draw the chart once you've converted the data into an array of points.
$.getJSON('dashboard_summary.php?', function(data) {
var Tips = [];
var Revs = [];
$.each(data, function(i, v) {
Tips.push({ x: new Date(v.Date), y: parseInt(v.Tip) });
Revs.push({ x: new Date(v.Date), y: parseInt(v.Revenue) });
});
chart(Tips, Revs);
});
Also, you can format the x-axis to make the chart look prettier (The format of the x-axis here is designed for the data given above. In your application, you may have to use another format style depending on the actual data):
function chart (Tips, Revs) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM",
interval:14,
intervalType: "day"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: Tips
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: Revs
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
A jsFiddle is made here for your review.

Updated codes. it Works >> Pastebin
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src = "http://canvasjs.com/wp-content/themes/bootstrap_child/assets/js/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" class="chart">
<script type="text/javascript">
data=[
{
"Date": "2014-01-30",
"CarsParked": "1",
"RevenueWithTip": "0",
"Revenue": "0",
"Tip": "0",
},
{
"Date": "2014-01-31",
"CarsParked": "10",
"RevenueWithTip": "10",
"Revenue": "7",
"Tip": "3",
},
{
"Date": "2014-02-28",
"CarsParked": "28",
"RevenueWithTip": "55",
"Revenue": "47",
"Tip": "8",
}];
var len = data.length;
$.each(data, function(i, v) {
chart(v.Date,v.Tip,v.Revenue,len);
});
function chart (dates,Tip,Rev,len) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Revenue",
fontSize: 15
},
axisX: {
gridColor: "Silver",
tickColor: "silver",
valueFormatString: "DD/MMM"
},
toolTip: {
shared:true
},
theme: "theme2",
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Tip",
markerType: "square",
color: "#F08080",
dataPoints: [
{
x: new Date(dates),
y: parseInt(Tip)
}
]
},
{
type: "line",
showInLegend: true,
name: "Revenue",
color: "#20B2AA",
lineThickness: 2,
dataPoints: [
{
x: new Date(dates),
y: parseInt(Rev)
}
]
}
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
</script>
</body>
</html>

jsFiddle
Update Code:
dataRevenue=
[
{ x: new Date(2014, 00,30), y: 0 },
{ x: new Date(2014, 01,31), y: 7},
{ x: new Date(2014, 02,28), y: 47}
];
dataTip =[
{ x: new Date(2014, 00,30), y: 0 },
{ x: new Date(2014, 01,31), y: 3},
{ x: new Date(2014, 02,28), y: 8}
];
var chart = new CanvasJS.Chart("chartContainer",
{
theme: "theme2",
title:{
text: "line chart"
},
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
//lineThickness: 3,
dataPoints: dataTip
},
{
type: "line",
//lineThickness: 3,
dataPoints: dataRevenue
}
]
});
chart.render();