I would like to get rid of the small dot in my tooltip display. I am using High-charts. I Can you please help in modifying this feature, here is my code:
Highcharts.getJSON(
'https://code.highcharts.com/mapdata/custom/world.topo.json',
topology => {
const chart = Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: ''
},
legend: {
enabled: false,
align: 'center',
verticalAlign: 'bottom',
itemStyle: {
fontWeight: 'bold',
fontSize: '20px'
}
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true,
buttonOptions: {
align: 'right',
verticalAlign: 'bottom'
}
},
mapView: {
maxZoom: 30,
projection: {
name: 'Orthographic',
rotation: [60, -30]
}
},
colorAxis: {
min: 0,
max: 100,
text: '',
stops: [[0, 'darkgrey', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
title: {
text: '',
},
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
pointFormat: '{point.name} <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: {point.value1}% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: {point.value2}%',
backgroundColor: 'black',
style: {
color: 'white'
},
},
plotOptions: {
series: {
animation: {
duration: 750
},
clip: false
}
},
mapline: {
color: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Graticule',
id: 'graticule',
type: 'mapline',
data: getGraticule(),
nullColor: 'lightgrey',
color: 'lightgrey',
accessibility: {
enabled: false
},
enableMouseTracking: false
},
{
data,
joinBy: 'name',
name: '',
states: {
hover: {
color: '',
borderColor: '#000000'
}
},
accessibility: {
exposeAsGroupOnly: true
}
}]
});
Here is an image of what is displayed: enter image description here
I want to get rid of the little dot in the top left of the tooltip box. I have been trying everything and it always seems to appear there. I have tried adding in "Marker: false", but maybe I am not inputting it in the correct spot (not sure if this is the correct code).
You can use formatter option for the tooltip, something like this, but add your values:
tooltip: {
formatter: function(tooltip) {
return `${question1}: <b>${percentage1}</b><br/>`
}
},
Here is documentation about it: https://api.highcharts.com/highcharts/tooltip.formatter
Currently i am working on a requirement, which user can click on the plotted area of a semi circle chart and increase the size of the hovered portion of the plotted area in semi cycle chart....I have gone through the Highchart API and come up with an solution, but my code snitpet is not working..can any one help me with this please.
this.chart = new Highcharts.Chart('container',
{
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
height: 400,
plotShadow: false
},
title: {
text: '98',
style: {
"fontSize": "48px"
},
align: 'center',
verticalAlign: 'middle',
y: 50
},
credits: {
enabled: false
},
tooltip: {
pointFormat: 'Test: <b>{point.percentage:.1f}%</b>',
enabled:false
},
colors: ['#FF0000', '#FFA500', '#FFFF00'],
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -100,
style: {
fontWeight: 'bold',
color: 'white'
}
},
point: {
events: {
click: function (e) {
alert("Clicked");
}
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series:[
{
data: [
{y: 1, name:"", id:"0"},
{ y: 7, name:"", id:"1"},
{ y: 2, name:"", id:"2"}
],
innerSize: '65%',
type: 'pie',
}
]
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
Set allowPointSelect property to true:
plotOptions: {
pie: {
allowPointSelect: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/h3xskctp/
I'm trying to add a tooltip with images to a donut pie chart. Is there a way that I can position the tooltip outside of the pie slice?
http://jsfiddle.net/jlai403/6eenxom2/4/
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
useHTML: true,
text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
verticalAlign: 'middle',
},
tooltip: {
useHTML: true,
pointFormat: "<img src='{point.customValue}' width='50'/>"
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
useHTML: false,
enabled: false,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Some Pie Chart',
data: [
{name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
{name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
{name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
],
size: '60%',
innerSize: '50%',
startAngle: 0,
endAngle: 260
}]
});
Am sorry I dont have the reputation to comment so I am adding the updated fiddle here. Do you mean something like this?
http://jsfiddle.net/6eenxom2/6/
Updated js
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
useHTML: true,
text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
verticalAlign: 'middle',
},
tooltip: {
useHTML: true,
//pointFormat: "<img src='{point.customValue}' width='50'/>",
formatter:function(){
$('#tooltip').html(this.y + '<img src=' + this.point.customValue + '/>');
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
useHTML: false,
enabled: false,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Some Pie Chart',
data: [
{name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
{name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
{name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
],
size: '60%',
innerSize: '50%',
startAngle: 0,
endAngle: 260
}]
});});
Using formatter function to display the tooltip information outside the pie slice.
I got fetched user from database, and all of them have review score.
I use while statement to show each user and the review score (using highchart).
The problem is that I'm getting only one chart, instead of getting one for each single user.
Here is the code
PHP:
if (isset($_COOKIE['rev_idx'])) {
$review_id=preg_replace('#[^0-9]#','',$_COOKIE['rev_idx']);
if ($review_id==$get_rev) {
$sql1="SELECT * FROM `user`.`review` WHERE reviewer_id='$review_id'";
$query1=mysqli_query($connect_dude,$sql1);
if (mysqli_num_rows($query1)>0) {
$show_review="";
while($row1=mysqli_fetch_assoc($query1)){
$rid=$row1['rid'];
$reviewer_id=$row1['reviewer_id'];
$reviewee_id=$row1['reviewee_id'];
$review_tit=$row1['review_tit'];
$review=$row1['review'];
$image=$row1['image'];
$point=$row1['points'];
$rev_date=$row1['rev_date'];
$sql2="SELECT * FROM `user`.`user_det` WHERE id='$reviewee_id'";
$query2=mysqli_query($connect_dude,$sql2);
if(mysqli_num_rows($query2)>0){
$row2=mysqli_fetch_assoc($query2);
$image=$row2['img'];
$busi_title=$row2['busi_title'];
$show_review.="<br><div id='indi_rev'><div style='width:600px;border-bottom:1px solid black;'></div><div id='rev_dat'>".$rev_date."</div>
<div style='width:600px;border-bottom:1px solid black;'></div>
<div style='float:left;'><a href='../".$reviewee_id."/index.php'><img src='../account/".$reviewee_id."/".$image."' width='130' height='150'></a><br><a href='../".$reviewee_id."/index.php'><b>".$busi_title."</b></a></div>
<div><br><b>".$review_tit."</b><br>".$review."</div><div id='Scores' style='min-width: 100px; height: 80px;max-width: 500px;'></div></div>";
}
}
} else {
$show_review="<b>You have not written any review yet.</b><br>Share your thought to others by writing review.";
}
} else {
header("location:reviewer.php?usr=".$review_id."");
}
}
Javascript:
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var x="<?php echo $point;?>";
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'Scores',
marginRight: 50,
events: {
//load: loadRed
}
},
title: {
text: '',
style: {
color: 'black',
fontWeight: '700',
fontFamily: 'Arial',
fontSize: 20
}
},
xAxis: {
categories: ['Review Score'],
title: {
text: null
},
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
style: {
color: 'black',
fontWeight: '700',
fontFamily: 'Arial',
fontSize: 11,
width: 90
}
}
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
title: {
text: null
}
},
tooltip: {
valueSuffix: ' /100'
},
plotOptions: {
series: {
stacking: 'percent'
},
bar: {
grouping: false,
dataLabels: {
enabled: false
}
}
},
legend: {
enabled: false,
align: 'right',
x: -40,
y: 100,
floating: false,
borderWidth: 0,
backgroundColor: '#FFFFFF',
shadow: false
},
credits: {
enabled: false
},
series: [
{
name: 'null',
data: [x],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'Score',
data: [x],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Score',
data: [x],
color: "green",
borderWidth: 0,
borderRadius: 5
}
]
});
});
</script>
Your help would be greatly appreciated
you should make many instance of highcahrt for many users by adding different id and loop your javascript code too.
change your
<div id='Scores' ....
to
<div id='Scores_".$reviewee_id."' ....
and cut your
< script >
block and paste after
$show_review.="<br><div ......
and change
renderTo: 'Scores',
to
renderTo: 'Scores_<?php echo $reviewee_id>',
The problem is that your x variable is string, but should be an array. So consider to print in php JSON (json_encode()) and then loat this in the javascript by the function $.getJSON().
So when I have a chart that has nothing but 0 data (such as packet loss measurement) the Y axis isn't drawn unless you implicitly define a max and min value.
I have however a need for the graph to auto draw with 0 data without specifying a max as the max may not always be know (data throughput for example).
http://jsfiddle.net/fYkQy/2/ shows what I'm getting. see code attached
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
PacketLoss = new Highcharts.StockChart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
spacingRight: 30,
spacingBottom: 45,
width: 600,
height: 400
},
rangeSelector: {
enabled: false
},
title: {
text: 'PacketLoss'
},
scrollbar: {
liveRedraw: true
},
navigator: {
adaptToUpdatedData: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 80,
maxZoom: 1440 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
min: 0,
offset: 35,
title: {
text: 'PacketLoss (%)',
margin: 12
}
},
tooltip: {
valueDecimals: 2,
valueSuffix: "%"
},
plotOptions: {
line: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 30,
y: 35,
floating: true,
shadow: true
},
series: [{
name: 'PacketLoss',
color: '#660000',
zIndex: 100,
data: [[1373354992000,0],[1373361195000,0],[1373363923000,0],[1373380804000,0],[1373388550000,0],[1373392475000,0],[1373399655000,0],[1373409555000,0],[1373409858000,0],[1373410160000,0],[1373410765000,0],[1373411067000,0],[1373411369000,0],[1373411670000,0],[1373411971000,0],[1373412273000,0],[1373412574000,0],[1373412875000,0],[1373413177000,0],[1373413479000,0],[1373413780000,0],[1373414082000,0],[1373414384000,0],[1373414686000,0],[1373414988000,0],[1373415289000,0],[1373415591000,0],[1373415893000,0],[1373416196000,0],[1373416497000,0],[1373416799000,0],[1373417101000,0],[1373417402000,0],[1373417704000,0],[1373418006000,0],[1373418308000,0],[1373418610000,0],[1373418911000,0],[1373419212000,0],[1373419514000,0],[1373419819000,0],[1373420120000,0],[1373420421000,0],[1373420723000,0],[1373421025000,0],[1373421326000,0],[1373421628000,0],[1373421929000,0],[1373422231000,0],[1373422532000,0],[1373422834000,0],[1373423136000,0],[1373425197000,0],[1373432327000,0]]
}]
});
});
http://jsfiddle.net/aBsqz/ shows how it looks with a set max and min (works with percentage values but not unknown values.
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
PacketLoss = new Highcharts.StockChart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
spacingRight: 30,
spacingBottom: 45,
width: 600,
height: 400
},
rangeSelector: {
enabled: false
},
title: {
text: 'PacketLoss'
},
scrollbar: {
liveRedraw: true
},
navigator: {
adaptToUpdatedData: true
},
xAxis: {
type: 'datetime',
tickPixelInterval: 80,
maxZoom: 1440 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
min: 0,
max: 100,
offset: 35,
title: {
text: 'PacketLoss (%)',
margin: 12
}
},
tooltip: {
valueDecimals: 2,
valueSuffix: "%"
},
plotOptions: {
line: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false
}
},
legend: {
enabled: true,
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 30,
y: 35,
floating: true,
shadow: true
},
series: [{
name: 'PacketLoss',
color: '#660000',
zIndex: 100,
data: [[1373354992000,0],[1373361195000,0],[1373363923000,0],[1373380804000,0],[1373388550000,0],[1373392475000,0],[1373399655000,0],[1373409555000,0],[1373409858000,0],[1373410160000,0],[1373410765000,0],[1373411067000,0],[1373411369000,0],[1373411670000,0],[1373411971000,0],[1373412273000,0],[1373412574000,0],[1373412875000,0],[1373413177000,0],[1373413479000,0],[1373413780000,0],[1373414082000,0],[1373414384000,0],[1373414686000,0],[1373414988000,0],[1373415289000,0],[1373415591000,0],[1373415893000,0],[1373416196000,0],[1373416497000,0],[1373416799000,0],[1373417101000,0],[1373417402000,0],[1373417704000,0],[1373418006000,0],[1373418308000,0],[1373418610000,0],[1373418911000,0],[1373419212000,0],[1373419514000,0],[1373419819000,0],[1373420120000,0],[1373420421000,0],[1373420723000,0],[1373421025000,0],[1373421326000,0],[1373421628000,0],[1373421929000,0],[1373422231000,0],[1373422532000,0],[1373422834000,0],[1373423136000,0],[1373425197000,0],[1373432327000,0]]
}]
});
});
Is this a bug? or am I initiating something incorrectly? Not sure whether this bug is only visible in the highstock fork.
Thanks
It looks like a problem, reported to our developers here