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
Related
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/
My Highchart tooltip is formatted as follows:
$(function() {
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Trebuchet MS"
}
},
lang: {
thousandsSeparator: ','
}
});
// plot the chart
new Highcharts.Chart({
chart: {
renderTo: 'graphContainer',
type: 'area',
marginBottom: 110
},
tooltip: {
shared: true,
xDateFormat: '%Y-%m-%d',
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>${point.y:,.0f} m</b><br/>',
crosshairs: true
},
......
I know the ":,.0f" controls the format of the number, but I can't figure out how to add the "," in the thousands place instead of the " " blank space.
I think the issue is a typo. The global should be thousandsSep rather than thousandsSeparator, as described in the API docs.
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/
I am making my first drilldown charts with Highcharts, and I just installed version 3.09, in which drilldown has built-in support. The drilldown chart will be part of a page that already contains multiple charts. All charts have 3 series (State, Region, Sub-region) with data populated dynamically.
The problem is that the drilldown module doesn't seem to support multiple parent series. In my case, if I click on a column for a specific series (say, State), then the State series will disappear and its drilldown will appear, but the other series (Region, Sub-region) are still displayed and the graphic doesn't make any sense then. See this jsFiddle: http://jsfiddle.net/jmunger/6bBzt/ .
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'CAT 1',
'CAT2'
]
},
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: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [{y:49.9, drilldown:'tokyo 1'}, {y:71.5, drilldown:'tokyo 2'}]
}, {
name: 'New York',
data: [{y:49.9, drilldown:'ny 1'}, {y:71.5, drilldown:'ny 2'}]
}],
drilldown:{
series: [{
id: 'tokyo 1',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
}, {
id: 'tokyo 2',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
},
{
id: 'ny 1',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
}, {
id: 'ny 2',
data: [{y:39.9, name:'name1'}, {y:31.5, name:'name2'}]
}]
}
});
});
How can I make sure that all parent series are hidden when I perform a drilldown, and that they are then restored correctly when I drill up?
It's bug in 3.0.8 and 3.0.9 version of drilldown. It's already fixed on master branch, see: http://jsfiddle.net/6bBzt/1/
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
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/