I using this code for the tooltip but it is not showing values in float like 56.1%
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
}
For me it works perfectly fine: http://jsfiddle.net/3bQne/231/
Make sure you have latest version of Highcharts.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: [{
type:'spline',
data: [3.45,4.21,5.11]
},{
type:'spline',
data: [5,4,3]
}]
});
Related
If we set useHTML: true for the tooltip and include an image, the image displays fine, but all the series data falls outside of the tooltip.
Are we doing something wrong?
tooltip: {
useHTML: true,
headerFormat: '<img src="/images/sample.jpg" width="150"/><br />► Listing {point.x}<br />',
pointFormat: '<span style="color:{series.color}">► {series.name} : </span> {point.y:, .0f} <br />',
split: false,
shared: true
},
I tried to reproduce the issue which you have described, but it seems that everything works fine.
Demo: https://jsfiddle.net/BlackLabel/hw6kt2cv/
Highcharts.chart('container', {
tooltip: {
useHTML: true,
headerFormat: '<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/dog_cool_summer_slideshow/1800x1200_dog_cool_summer_other.jpg" width="150"/><br />► Listing {point.x}<br />',
pointFormat: '<span style="color:{series.color}">► {series.name} : </span> {point.y:, .0f} <br />',
split: false,
shared: true
},
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
Maybe some other options have an impact on your chart? Could you share a sample which will show the issue?
According to the comments - using the tooltip.outside should fix the described issue.
Demo: https://jsfiddle.net/BlackLabel/1xshj85w/
API: https://api.highcharts.com/highcharts/tooltip.outside
I'm new to highcharts and I want to display date according to the data I get from the Database. I want to show date either in the tooltip or below the categories. Right now categories is displaying name of days. If possible I want to display date of that day below the Day in categories.
<script>
Highcharts.chart('column', {
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: <?= json_encode($day_names) ?>,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
}
},
colors: [
'#1cc88a', '#4e73df', '#f6c23e', '#e74a3b'
],
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
enabled: false
}
}
},
series: JSON.parse('<?= $processed_stars_data ?>')
});
</script>
You can use moment.js to get the values formatted, but
Highcharts has it's own date formatting functionality
which would be more idiomatic with Highcharts. It can be attached
onto the tooltip option in the highcharts constructor like so:
tooltip: {
formatter: function() {
return '<b>' + this.series.name +'</b><br/>' +
Highcharts.dateFormat('%e - %b - %Y',
new Date(this.x))
+ ' date, ' + this.y + ' Kg.';
}
}
You may want to also add the dateTimeLabelFormats object with the
options you need for your dates, under the xAxis.
http://jsfiddle.net/Kc23N/3/
I'm using highchart in my web site. I wanna use thousand seperator in tooltip.
Here's the code:
divChart.highcharts({
lang: {
thousandsSep: ','
},
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: ''
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<div style="direction:rtl; text-align:center; font-size:16px;">{point.key}</div><table >',
pointFormat: '<tr><td style="text-align: center;color:{series.color};width:100px;"><b style="margin:4px;">{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>'
},
series: temp
});
But it's not working.
And also I wanna display pie chart labels in rtl direction.
Thanks for answering.
You can use a tooltip formatter and inside use a Highcharts.numberFormat
tooltip: {
shared: true,
useHTML: true,
formatter: function() {
return '<div style="direction:rtl; text-align:center; font-size:16px;">'+this.key+'</div><table><tr><td style="text-align: center;color:'+this.series.color+';width:100px;"><b style="margin:4px;">'+Highcharts.numberFormat(this.y,0,'.',',')+'</b></td></tr></table>';
}
},
Example:
- http://jsfiddle.net/bd1hvj1y/
Below is my code to display basic column chart.
$(function () {
Highcharts.setOptions({
colors: ['#f89422','#8cc641']
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Jan',
'Feb'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
colorbypoint: true,
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5]
}]
});
});
Though I have given 2 colors in the set options, and colorBypoint: true in plotOptions,
It is showing the same color. Orange.
Any idea? Please refer this fiddle - http://jsfiddle.net/88YSd/
The points are showing the same color as they are in the same series.
You can specify indivual point colors like this:
data: [{y:49.9,color:'#f89422'}, {y:71.5,color:'#8cc641'}]
http://jsfiddle.net/Zhmw2/
An alternative would be to put the two points in separate series
series: [{
name: 'Jan',
data: [49.9]
},{
name: 'Feb',
data: [71.5]
}
http://jsfiddle.net/H5KmK/
My requirement is to turn out other column bar graph in highcharts to dim color when we hover over one. I looked for this on community but found no specific answer. my code is as below:
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<apex:includeScript value="{!URLFOR($Resource.ios, 'jquery-1.9.1.js')}"/>
<script>
var lowerIndex;
var upperIndex;
if({!maxBarVisible}==0)
{
lowerIndex = 0;
upperIndex = 0;
}
else
{
lowerIndex = {!maxBarVisible} - ({!maxBarVisible}-1);
upperIndex = {!maxBarVisible};
}
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 50,
marginBottom: 30
},
title: {
text:''
},
credits: {
enabled: false
},
legend: {
enabled: false
},
scrollbar:{
enabled:{!showSlider}
},
xAxis: {
min:lowerIndex,
max:upperIndex,
categories: [{!x_axisMonths}]
},
yAxis: {
min: 0,
title: {
text: 'MRR($)'
}
},
colors: [
'rgb(24, 150, 212)',
'rgb(116, 187, 59)',
],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
tip: 'bottomLeft'
},
series: [{!y_axisData}]
});
});
});
</script>
Any suggestions?