Develop Reference

Add second series to highchart master detail

I'm using highcharts to create a master-detail chart, could you help me how to add another series type area to the chart? i have used example from official site, but i cant imagine how to add second area to this chart
const priceChart1 = Highcharts.getJSON(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json',
data => {
let detailChart;
// create the detail chart
function createDetail(masterChart) {
// prepare the detail chart
var detailData = [],
detailStart = data[0][0];
masterChart.series[0].data.forEach(point => {
if (point.x >= detailStart) {
detailData.push(point.y);
}
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
zoomType: "x",
spacingLeft: 10,
spacingRight: -20,
borderRadius: 10,
backgroundColor: "#F3F3F3",
borderColor: "#335cad",
height: priceChartHeight,
style: { fontFamily: "Manrope" },
style: {
position: 'absolute'
},
resetZoomButton: {
position: {
// align: 'right', // by default
// verticalAlign: 'top', // by default
x: -40,
y: 5
},
theme: {
fill: '#377DED',
stroke: 'transparent',
r: 0,
style: {
color: 'white',
borderRadius: 10
},
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
},
},
},
},
},
marginBottom: 90,
reflow: false,
marginLeft: 10,
style: {
position: 'absolute'
}
},
credits: {
enabled: false
},
title: {
text: null,
align: 'left'
},
subtitle: {
text: null,
align: 'left'
},
xAxis: {
type: 'datetime',
visible: false,
},
yAxis: {
title: {
text: null,
},
opposite: true,
gridLineColor: "rgba(87, 87, 87, 0.15)",
gridLineDashStyle: "dash",
left: -40
},
tooltip: {
formatter: function () {
var point = this.points[0];
return '' + '<br/>' + ' <span style="font-weight: 700;font-size: 14px; line-height: 19px; color: #377DED;"> ' + Highcharts.numberFormat(point.y, 2) + '</span> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">Nominal</span>' + '<br/> ' + '<span style="font-size: 9px; font-weight: 300; line-height: 12px; color: rgba(51,51,51, 0.25)">' + Highcharts.dateFormat('%e %B %Y', this.x) + '</span>' },
shared: true,
borderRadius: 5,
borderColor: 'transparent',
shadow: false,
backgroundColor: '#fff'
},
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3
}
}
}
}
},
series: [
{
name: 'Nominal',
data: detailData,
type: 'area',
},
],
exporting: {
enabled: false
}
}); // return chart
}
// create the master chart
function createMaster() {
Highcharts.chart('master-container', {
chart: {
reflow: false,
borderWidth: 0,
backgroundColor: null,
spacingLeft: 10,
spacingRight: 30,
borderRadius: 10,
zoomType: 'x',
events: {
// listen to the selection event on the master chart to update the
// extremes of the detail chart
selection: function (event) {
var extremesObject = event.xAxis[0],
min = extremesObject.min,
max = extremesObject.max,
detailData = [],
xAxis = this.xAxis[0];
// reverse engineer the last part of the data
this.series[0].data.forEach(point => {
if (point.x > min && point.x < max) {
detailData.push([point.x, point.y]);
}
});
// move the plot bands to reflect the new detail span
xAxis.removePlotBand('mask-before');
xAxis.addPlotBand({
id: 'mask-before',
from: data[0][0],
to: min,
color: 'rgba(0, 0, 0, 0)'
});
xAxis.removePlotBand('mask-after');
xAxis.addPlotBand({
id: 'mask-after',
from: max,
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
});
xAxis.addPlotBand({
id: 'mask-after',
from: min,
to: max,
color: 'rgba(255, 255, 255, 1)',
borderColor: "#377DED",
borderWidth: 2
});
detailChart.series[0].setData(detailData);
console.log(min)
console.log(max)
return false;
}
}
},
title: {
text: null
},
accessibility: {
enabled: false
},
xAxis: {
type: "datetime",
labels: { format: '{value:%b %e }' },
crosshair: {
color: '#377DED80'
},
lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent', minorTickLength: 0, tickLength: 0,
top: -5,
showLastTickLabel: true,
maxZoom: 14 * 24 * 3600000, // fourteen days
plotBands: [{
id: 'mask-before',
from: data[0][0],
to: data[data.length - 1][0],
color: 'rgba(0, 0, 0, 0)'
}],
title: {
text: null
},
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
},
min: 0.6,
showFirstLabel: false
},
tooltip: {
borderRadius: 50,
borderColor: 'red'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
fillColor: {
linearGradient: [0, 0, 0, 70],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(255,255,255,0)']
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
enableMouseTracking: false
}
},
series: [{
type: 'area',
name: 'USD to EUR',
pointInterval: 24 * 3600 * 1000,
pointStart: data[0][0],
data: data
}],
exporting: {
enabled: false
}
}, masterChart => {
createDetail(masterChart);
}); // return chart instance
}
// make the container smaller and add a second container for the master chart
const container = document.getElementById('price-chart-main');
container.style.position = 'relative';
container.innerHTML += '<div id="detail-container" style="height: 100%"></div><div id="master-container" style="height: 90px; position: absolute; bottom: 0; width: 100%"></div>';
// create master and in its callback, create the detail chart
createMaster();
}
);
there is example that i used https://www.highcharts.com/demo/dynamic-master-detail

Adding a new series to a master-detail chart is very simple. You need to only add a new data set and connect it to the right series. For example:
var detailData = [
[],
[]
],
detailStart = data1[0][0];
masterChart.series.forEach((s, index) => {
s.points.forEach(point => {
if (point.x >= detailStart) {
detailData[index].push(point.y);
}
});
});
// create a detail chart referenced by a global variable
detailChart = Highcharts.chart('detail-container', {
chart: {
type: 'area',
...
},
...,
series: [{
data: detailData[0]
}, {
data: detailData[1]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/97dxakfe/
API Reference: https://api.highcharts.com/highcharts/series

Highcharts- chart does not display

I am new to using highcharts, and web development. I am displaying the data from a REST API. I have a chart chart1 which is inside the getJSONmethod. This chart displays the data as expected. However, the other chart chart, which is outside, and after the getJSON method does not display the data.
console.log() after the getJSON method that show the data to be put on the chart is updated, as expected. Why does chart(which should display the ambient light) not work?
$(function updat() {
var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
var humid = [],
date = [],
high=[],
day=[],
chanceOfRain=[],
humid_final = [],
day_final=[],
high_final=[],
chanceOfRain_final=[],
Itemss=[],
SortedItems=[]
var htmlText='';
$.getJSON(url, function (json) {
$(json['Items']).each(function(i, data) {
//Store indicator name
// fill the date array
humid.push(data.humidity);
// fill the string data array
date.push(data.Date);
high.push(data.high);
day.push(data.Day);
chanceOfRain.push(data.chanceOfRain);
});
//unsorted array
Itemss=$(json['Items']);
//console.log("ITEMS",Itemss);
//sorted array- date
date.sort(function(a,b) { return a - b;});
// Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log("Sorted Days", date);
Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
console.log(" Sorted ITEMS",Itemss);
////////
///////
// query send string that we need to convert into numbers
for (var i = 0; i < humid.length; i++) {
if (humid[i] != null) {
humid_final.push(parseFloat(humid[i]));
high_final.push(parseFloat(high[i]));
day_final.push(parseFloat(day[i]));
chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
} else {
humid_final.push(null)
};
}
//sorting the arrays
day_final.sort(function(a,b) { return a - b;});
// console.log("Sorted day_final", day_final);
humid_final.sort(function(a,b) { return a - b;});
//ACTIVITY LOG
var h1 = [10, 20, 30, 40,50,60];
var t1 = [50, 60, 70, 80, 90, 100];
var activ= document.querySelector('.activ');
for(var i=0; i<h1.length;i++){
activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
}
var chart1 = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'temp&humid',
marginBottom: 100
},
title: {
text: 'Temperature and Humidity'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'Temperature',
data: chanceOfRain_final,
color:'#646569' //
},
{
type:'line',
name:'Humidity',
data: day_final,
color:'#c5050c'
}]
});
var chart2= Highcharts.chart('stacked', {
credits: {
enabled: false
},
chart: {
height: 250,
width: 400,
type: 'column'
},
title: {
text: "Today's Light and Water Sources"
},
xAxis: {
categories: ['Water', 'Light']
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Natural',
data: [7 , 6],
color:'#c5050c'
}, {
name: 'Automatic',
data: [ 3, 4],
color: '#646569'
}]
});
}); //getJSON method
//setTimeout(updat, 3000);
console.log("high_final!",high_final);
var chart = new Highcharts.chart({
credits: {
enabled: false
},
chart: {
height: 200,
type: 'spline',
renderTo: 'light',
marginBottom: 100
},
title: {
text: ' Ambient Light'
},
tooltip: {
valueDecimals: 2,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
subtitle: {
text: ''
},
xAxis: {
categories: day_final //.reverse() to have the min year on the left
},
series: [{
name: 'light level',
data: high_final, //
color: '#9b0000'
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>
<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>
<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -19%" >
<div id="currentSatus"><center><b>Current Status</b><center></div>
<br>
<div id="temp" style="background: #72D923;padding-top:10px; height: 30px"><font face='verdana'><center>Temperature</center></font> </div>
<div id="hum" style="padding-top:10px; background: red; height: 30px"><font face='verdana'><center>Humidity</center></font></div>
<div id="water" style="background:#72D923;padding-top:10px; height: 30px "><font face='verdana'><center>Water</center></font></div>
<div id="ligh" style="background: red; padding-top:10px; height: 30px"><font face='verdana'><center>Light</center></font></div>
</div>
<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -16%"><center><b>Activity Log</b></center> </div>

The problem with the last chart is, that it is initialized before the getJSON function gets the data from the server. The chart1 and chart2 charts are initialized in the success callback, when the data is received from the server.
You could check it in the jQuery documentation here: http://api.jquery.com/jquery.getjson/
If you put the third chart into the success callback, it would work.

Is to possible to delay the needle loading animation in Highcharts angular gauge?

I have created a Highcharts Angular gauge. I need to delay the needle loading animation.
Here is the code:
$(function () {
$('#meter').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: ''
},
//
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '70%',
backgroundColor: '#000',
topWidth: 1,
baseWidth: 5,
rearLength: '20%'
},
pivot: {
radius: 5,
borderWidth: 5,
borderColor: '#000',
backgroundColor: '#fff'
}
}
},
pane: {
startAngle:-90,
endAngle: 90,
center: ['50%', '55%'],
size: '85%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#0187CC',
innerRadius: '110%',
outerRadius: '100%',
borderColor: 'transparent',
shape: 'arc',
},
},
// the value axis
yAxis: {
min: 0,
max: 30,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#0187CC',
tickPixelInterval: 30,
tickWidth: 10,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#0187CC',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
color: '#FFF'
}
]
},
series: [{
name: 'Speed',
data: [20],
tooltip: {
valueSuffix: ' Mbps'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0) * 0);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
display: none;
}
.highcharts-axis-labels text{
fill: #000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.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/modules/exporting.js"></script>
<script src="meter.js"></script>
<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

In your 'plotOptions` attribute, add the following code:
series: {
animation: {
duration: 2000
}
}
This will cause the gauge needle to start up more slowly. Increase the number to slow it down; decrease the number to speed it up.
See also the updated code snippet below.
I hope this is helpful!
$(function () {
$('#meter').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: ''
},
//
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '70%',
backgroundColor: '#000',
topWidth: 1,
baseWidth: 5,
rearLength: '20%'
},
pivot: {
radius: 5,
borderWidth: 5,
borderColor: '#000',
backgroundColor: '#fff'
}
},
series: {
animation: {
duration: 2000
}
}
},
pane: {
startAngle:-90,
endAngle: 90,
center: ['50%', '55%'],
size: '85%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#0187CC',
innerRadius: '110%',
outerRadius: '100%',
borderColor: 'transparent',
shape: 'arc',
},
},
// the value axis
yAxis: {
min: 0,
max: 30,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#0187CC',
tickPixelInterval: 30,
tickWidth: 10,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#0187CC',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
color: '#FFF'
}
]
},
series: [{
name: 'Speed',
data: [20],
tooltip: {
valueSuffix: ' Mbps'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0) * 0);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
display: none;
}
.highcharts-axis-labels text{
fill: #000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.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/modules/exporting.js"></script>
<script src="meter.js"></script>
<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

Draggable Jquery Meter

I have just started to learn Javascript and Jquery. I have been able to create a simple meter which shows random generated values. I am trying to make this meter draggable.
Here is my project.
https://jsfiddle.net/apoorvasomani/aLnvvn00/
Javascript Code -
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
</div>
HTML -
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);
});
I have searched google and most of them tell how to make an html element draggable and not something made using jquery draggable. Please help me here understand what needs to be done.

highcharts donut chart center text overlaps with tooltip

I am showing text in the center of Highcharts Donut/Pie chart.
But my problem is that the center text overlaps with the tooltip text and tooltip becomes unreadable.
I have tried changing the zIndex of tooltip to bring it to front but it doesn't work. I want the tooltip to be on top of the donut center text.
See complete chart here: http://jsfiddle.net/SufianRashid/88q5uke1
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
backgroundColor: 'white',
useHtml: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//-------- Show Center Text ------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}

Try following will solved your issue:
CSS:
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
JQuery:
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
Check:
RenderPieChart(
'PieChartContainer',
[
{ name: 'tickets opened within 24 hrs', y: 76.5, actualCounts: 54, url:'../dummyUrl.html' },
{ name: 'tickets opened within 25 to 48 hrs', y: 6.9, actualCounts: 77, url:'../dummyUrl.html' },
{ name: 'tickets opened in 49 to 72+ hrs', y: 93.1, actualCounts: 1032, url:'../dummyUrl.html' }
],
"<span id='DonutCenterText' style='text-align:center;' class='donutValuesOpen'><span>Total Open <br/>Tickets: <a href='../dummyUrl.html'> 1109 </a> <br/> </span><span class='Avg'>Average Days <br/>Open: 8 </span> </span>"
);
//==================== HIGH CHARTS =========================//
function RenderPieChart(chartId, chartData, donutCenterText) {
$('#' + chartId).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false,
height: 270
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
align: 'center',
verticalAlign: 'middle',
y: 0,
useHTML: true
},
tooltip: {
borderWidth: 0,
backgroundColor: "rgba(255,255,255,0)",
shadow: false,
useHTML: true,
//zIndex: 99, //on top of everything
headerFormat: '',
pointFormat: '{point.actualCounts} {point.name}'
},
plotOptions: {
pie: {
dataLabels: {
formatter: function () { if (this.y != 0) return this.y + '%'; }, //don't show 0% values
enabled: true,
distance: -25, //change this value to show label inside/outside the pie chart (negative means towards inside)
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
//showInLegend: true,
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
},
//-------- On click open drill down url --------//
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.options.url; //same window
}
}
}
}//End adding link
//--------------------------------//
},
series: [{
type: 'pie',
innerSize: '140px',
//--------------------//
data: chartData
//--------------------//
}]
},
//------- Show Donut center text ------------------//
function (chart) {
var xpos = chart.plotLeft + (chart.plotWidth * 0.43);
var ypos = chart.plotTop + (chart.plotHeight * 0.4);
// Render the text
chart.innerText = chart.renderer.html(donutCenterText, xpos, ypos).add();
}
); //EOF: HighChart
}
.highcharts-tooltip span {
background-color:white;
border:1px solid;
opacity:1;
z-index:9999 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="PieChartContainer" style="height: 400px"></div>