I am after getting rid of the shadow around the highchart I have made, there is currently a shadow when hovered over the area of the pie chart like in this image:
I am also after getting text in the center of the pie chart.
Example
Here is the code:
$(function() {
// Create the chart
Highcharts.setOptions({
colors: ['#26d248', '#323232']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'summoner-pie-container',
type: 'pie',
backgroundColor:'transparent'
}, plotOptions: {
series: {
marker: {
states: {
hover: {
enabled: false
}
}
}
},
pie: {
borderWidth: 0
}
},
title: {
text: '',
style: {
display: 'none'
}
}, credits: {
enabled: false
}, exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
},
series: [{
data: [["Damage Dealt",34000],["Team Damage Dealt",86423]],
size: '60px',
innerSize: '70%',
dataLabels: {
enabled: false
}
}]
});
});
http://jsfiddle.net/HpdwR/1994/
In your tooltip settings:
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
}
},
You need to add shadow: false
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y;
},
shadow: false
}
Also, in your plotOptions you need to essentially remove the marker layer in the object, like so:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
},
(Working Fiddle)
Related
am trying to export highchart to image, my high chart contains arabic labels (captions) after export arabic text shows as question marks, i tried to add (useHTML) and changed the script encoding to (utf8) and it still showing as question marks.
var options = {
chart: {
style: {
fontFamily: 'arial'
},
height: 300,
events: {
drilldown: function (e) {
generateDrillDownJSON(e, false);
},
drillup: function (e) {
generateDrillDownJSON(e, true);
}
}
},
title: {
text: Var_ChartTitleText,
},
subtitle: {
text: Var_ChartSubtitleText,
},
tooltip: {
formatter: function () {
return this.point.name + ' : ' + this.y + ' %';
}
},
xAxis: {
categories: true
},
drilldown: Var_drilldown,
legend: {
enabled: true
},
plotOptions: {
allowhtml: true,
series: {
dataLabels: {
enabled: true,
formatter: function () {
return this.point.name + ' : ' + this.y + ' %';
}
},
useHTML: true,
shadow: true
},
pie: {
size: '100%',
showInLegend: true
}
},
series: Var_Series
};
when exporting it shows as below
I have tried the solution at https://stackoverflow.com/a/24206104/5653279 but to no avail as my Highcharts consist of 2 series of data.
Following the above solution returns me the error
Uncaught TypeError: Cannot read property 'category' of undefined
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
zoomType: 'xy',
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
}
},
tooltip: {
enabled: false,
headerFormat: '<b>{point.x: %A, %b %e at %I:%M %p}</b><br>',
shared: true,
borderRadius: 10,
crosshairs: [true, false] //x,y
},
plotOptions: {
series: {
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}
},
title: {
text: 'Glucose/Carbohydrate'
},
subtitle: {
text: 'Ratio between Glucose and Glucose'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e/%b',
},
title: {
text: 'Date'
}
},
yAxis: [{ // Glucose yAxis
labels: {
format: '{value}mmol/L',
style: {
color: Highcharts.getOptions().colors[0]
}
},
title: {
text: 'Glucose',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Carbohydrate yAxis
title: {
text: 'Carbohydrate',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
},{
name: 'Carbohydrate',
data: carbohydrate,
dashStyle: 'shortdot',
yAxis: 1,
marker: {
enabled: true
}
}
]}
);
});
However, the error would be "solved" if I edit plotOptions as seen.
plotOptions: {
series: [{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
{
stickyTracking: false,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
}]
},
But still, the tooltip does not show when I clicked on any point.
Solved the issue!
Just changed
this.chart.myTooltip.refresh(evt.point, evt);
to
this.chart.myTooltip.refresh([evt.point], evt);
But the only limitation to this fix is if there's multiple series (e.g. Line A and B) and the data of both series falls on the same X-Axis (e.g. on the same date), clicking on it will only show the tooltip of that particular series's data (if I click on series A's data, the tooltip only shows A's data without B, even though they are sharing the same X-Axis).
I'm using Highcharts pie chart and I want to add custom suffix for each point. For example now I have this in the tooltip formatter:
tooltip : {
formatter : function() {
return 'Daily KB: <b>'+ this.point.y +'</b>';
}
},
and the way the pop up is displayed is something like that for each piece of the pie Daily KB: 300. How can I modify this so that in one piece the pop up will be somehting like this Daily KB: 700 remaining and the other will be Daily KB: 300?
Highcharts script:
(function($){
$(this.document).ready(function(){
//get local time
Highcharts.setOptions({
colors: ['#fa604c', '#00CC66']
});;
myChart_d = new Highcharts.Chart({
chart: {
height:200,
width:200,
type: 'pie',
animation: false,
renderTo: 'dailychart',
zoomType: 'x',
events: {
load: function () {
requestDataLim();
}
}
},
title: {
text: 'Daily'
},
tooltip : {
formatter : function() {
return 'Daily KB: <b>'+ this.point.y +'</b>';
}
},
//tooltip: {
//shared:true
//},
plotOptions: {
pie: {
// allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
},
borderColor: '#A0A0A0',
innerSize: '40%',
},
series:{
dataLabels: {
style:{ fontSize: '14px', fontWeight:'bold' },
enabled: true,
formatter: function() {
return Math.round(this.percentage) + ' %';
},
distance: -15,
color:'black'
}
},
},
credits: {
enabled: false
},
series: [{
name: 'DailyKB',
data:
[<?php echo join(',',$d);
echo ',';
echo join (',',$dl);?>]
}],
exporting: {
buttons: {
printButton: {
enabled: false
},
exportButton: {
enabled: false
}
}
}
});
I get me data through ajax and JSON and currently are something like this [300, 700]
How about changing format fo data to array of objects? For example:
[{y: 300, suffix: ""}, {y: 700, suffix: " remaining" }]
Then in tooltip set add suffix info:
return 'Daily KB: <b>'+ this.point.y +'</b>' + this.point.options.suffix;
When I open a page that contains Highcharts (I use 3 pie charts), the print dialog always shows and I don't know how it comes and to stop it.
This is the js code:
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'users_contain',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Users'
},
// exporting: {
// buttons: {
// exportButton: {
// enabled:true
// },
// printButton: {
// enabled:false
// }
// }
// },
exporting: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage,2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'User Usage',
data: []
}]
}
$.getJSON("data/account_preview/user_usage.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
I've tried to modify its exporting by add this
exporting: {
enabled: false
}
or
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
}
but, it also didn't work, it just make the button exporting be disabled in the chart.
Anyone know, how to stop print dialog when I open page that containt highcharts ?
Thank's.
Need help removing that grey line coming out of the chart in the grey part of the chart.
http://jsfiddle.net/Y2e5p/
// Build the chart
$('#' + div_id).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: title
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer'
}
},
series: [{
type: 'pie',
name: title,
size: '60%',
innerSize: '40%',
data: [{
y: number,
name: title,
color: color,
dataLabels: {
enabled: true,
color: '#000000',
inside: true,
formatter: function () {
return Math.floor(Number(this.percentage)) + ' %';
}
}
}, {
y: (100 - number),
name: " ",
color: '#AAAAAA',
dataLabels: {
enabled: true
}
}]
}]
});
You can set datalabels for point and in formatter recognise if datalabels should be or not
http://jsfiddle.net/Y2e5p/2/
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled:true,
formatter: function () {
if(this.point.dataLabels.enabled)
return Math.floor(Number(this.percentage)) + ' %';
else
return null;
}
}
}
},