for my project I need to change the look of tooltip.
I found in the api documentation, to set useHTML to true, but it doesn't help.
here is my example:
tooltip: {
borderWidth: 0,
style: {
padding: 0
},
useHTML: true,
formatter: function(){
return '<div style="float:left"><small>' + this.series.name +
'</small></div><br/><div style="float:left;">test:</div>' +
'<div style="float:left;padding-left: 30px;"><b>' +
this.point.test +
'</b></div>';
}
}
http://jsfiddle.net/6tc6T/147/
Move the tooltip out of the plotOptions http://jsfiddle.net/ahZWS/.
var options = {
...
legend: {
enabled: false
},
tooltip: {
borderWidth: 0,
style: {
padding: 0
},
useHTML: true,
formatter: function(){
return '<div style="float:left"><small>' + this.series.name +
'</small></div><br/><div style="float:left;">test:</div>' +
'<div style="float:left;padding-left: 30px;"><b>' + this.point.test +
'</b></div>';
}
},
plotOptions: {
...
}
, series: seriesArr
};
Related
i try to make negative value show in pie chart , and it success but when i use exporting 'downloadXLS' and 'viewData' the value its always show possitive, i know when use pie chart the data value must be possitive, but there is any method when export to 'downloadXLS' and 'viewData' can edit value data to negative ?
this is jsfiddle when i try to make the chart https://jsfiddle.net/zhpnos50/3/
Highcharts.chart('container', {
chart: {
type: 'pie',
},
title: {
text: 'Chart'
},
credits: {
enabled: false
},
tooltip: {
pointFormatter: function () {
if (this.y === null) {
return this.name + ': 0%';
} else {
return this.name + ': ' + (this.negative ? '-'+ this.y : this.y) + '%';
}
},
useHTML: true
},
legend: {
itemStyle: {
fontSize: '11px',
},
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)',
labelFormatter: function () {
if (this.y === null) {
return this.name + ': 0%';
} else {
return this.name + ': ' + (this.negative ? '-'+ this.y : this.y) + '%';
}
},
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
formatter() {
let neg = this.point.negative,
value = this.point.negative ? -this.y : this.y,
negativeColor = Highcharts.defaultOptions.colors[0];
return '<b>'+this.point.name+'</b>: '+value+' %'
}
}
},
series: {
cursor: 'pointer',
}
},
series: [{
name: 'Value',
data: [{
name: 'A',
y: 106.733600
}, {
name: 'B',
y: 0.725800
}, {
name: 'C',
y: 0.000000
}, {
name: 'D',
y: 7.530000,
negative: true
}, {
name: 'E',
y: 0.070500
}]
}],
exporting: {
sourceHeight: 800,
sourceWidth: 800,
scale: 1,
buttons: {
contextButton: {
menuItems: ['printChart', 'downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadXLS','viewData']
}
}
}
});
<script src="https://github.highcharts.com/gantt/highcharts-gantt.src.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"></div>
You can add the below plugin to modify exported values:
(function(H) {
H.addEvent(H.Chart, 'exportData', function(e) {
const dataRows = e.dataRows;
this.series[0].points.forEach(point => {
if (point.options.negative) {
// +2 to skip title rows
dataRows[point.index + 2][1] = -point.y;
}
});
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/ert78shL/
Docs: https://api.highcharts.com/highcharts/exporting.csv
The date displayed on the highcharts xaxis label is showing non-existent dates, not actual data. What should be set on the xaxis label to show the existing date values?
My code is below.
Highcharts.stockChart('dataChart', {
credits: {
enabled: false
},
rangeSelector: {
selected: 5
},
title: {
text: result[0].chartRptCdNm
},
xAxis: {
type: "datetime",
labels: {
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: result[0].graphYaxis
},
opposite: false,
lineWidth: 1,
margin: 0,
labels: {
format: '{value}' + result[0].graphYaxisUnit,
align: "right",
y: -5,
x: -5
}
},
tooltip: {
headerFormat: "",
useHTML: true,
valueDecimals: 2,
split: true,
formatter: function () {
var s = "";
$.each(this.points, function() {
s += '<span style="color:' + this.series.color + ';">\u25CF</span><b>' + this.series.name + '</b><br/>';
s += '<span style="font-size: 13px"> 일자 : ' + Highcharts.dateFormat('%Y-%m-%d', new Date(this.x)) + '</span><br/>';
s += '<span style="font-size: 13px"> 금리 : ' + (Math.floor(this.y * 100) / 100) + '</span><br/>';
});
return s;
}
},
series: seriesArr
});
I am making a chart using a single line series.
Trying to increase bar height to accommodate series name inside bar and trying to reduce default gap between series group. The section "series: []" is, I assume for the JSON return function to populate. Tried many examples from all the generous JSFiddle examples to no avail. I'm a noob so please be patient. Any ideas? So far I have: http://jsfiddle.net/PeterHanekom/7ue5bkm8/1/
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
colors: ['#00B9B9', '#527CED', '#A7D36B', '#B9B900', '#0097FF', '#400040', '#EA4D00', '#336699', '#8080C0', '#ADA870'],
title: {
text: 'Cluster Totals',
x: -20 //center
},
subtitle: {
text: 'Dept - Branch',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Percentage'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
align: 'center',
borderWidth: 0
},
plotOptions: {
bar: {
stacking: 'normal',
pointWidth: 20,
pointPadding: 0,
cursor: 'pointer',
point: {
events: {
click: function() {
alert('later drilldown events');
}
}
dataLabels: {
enabled: true,
inside:true,
useHTML: true,
align: 'left',
color: 'white',
style: {
fontWeight: 'bold'
},
verticalAlign: 'middle',
formatter: function () {
if (this.series.name)
return '<span style="color:black; height: 25px;">' + this.series.name + ' = ' + this.y + '</span>';
else return '';
}
}
}
},
series: []
}
$.getJSON("./services/get360Pivot.php?s_Search=" + sOperatorSearch, function(json)
{
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
});
I think you options you need are groupPadding and pointWidth. e.g.
groupPadding:0.1,
pointWidth:20,
http://jsfiddle.net/s3t2pL94/
I am using Highcharts.
Can any one tell me how to assign different tooltip suffix value to different points of same series?
To show the tooltip like: this.X:this:y this.suffix value
I am using below code to bind Highcharts:
var options = {
chart: {
height: 122,
width: 387,
type: 'line',
borderWidth: 1,
borderColor: '#EBBA95',
borderRadius: 1
},
credits: {
enabled: false
},
title: {
text: titleText
},
subtitle: {
text: subtitletext
},
xAxis: {
title: {
text: xAxistitle
},
categories: [],
labels: { enabled: false }
},
yAxis: {
title: {
text: yAxistitle
},
labels: { enabled: true },
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: false,
style: {
textShadow: '0 0 3px white, 0 0 3px white'
}
},
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
},
showInLegend: true,
enableMouseTracking: true
},
/* tooltip: {
shared: true
//,
//formatter: function ()
//{
// return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series ' + this.series.valueSuffix;
//}
},*/
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} KKKK </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var series = this.series;
for (var count = 0; count < series.options.data.length; count++) {
var IndexOfSelectedDataValue = series.options.data.indexOf(this.y);
var IndexOfSelectedIDValue = series.options.vitalid[IndexOfSelectedDataValue];
var URL = CrmServerURL + 'main.aspx?etc=' + vitalsEntityObjectTypeCode + "&pagetype=entityrecord&id=%7b" + IndexOfSelectedIDValue + "%7D";
PIH.PIHClass.OpenUrl(URL);
break;
}
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [],
navigation: {
buttonOptions: {
enabled: false
}
}
};
seriesdata1.reverse();
seriesdata2.reverse();
var StartDate = seriesdata1[0].date;
var EndDate = seriesdata1[seriesdata1.length - 1].date;
document.getElementById("Fromdate").innerHTML = StartDate;
document.getElementById("Todate").innerHTML = EndDate;
if (seriesdata1.length > 0) {
options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series
for (i = 0; i < seriesdata1.length; i++) {
options.xAxis.categories[i] = seriesdata1[i].date;
}
for (i = 0; i < seriesdata1.length; i++) {
options.series[0].name = seriesdata1[i].name;
options.series[0].data[i] = seriesdata1[i].data;
options.series[0].tooltip = seriesdata1[i].tooltip;
options.series[0].vitalid[i] = seriesdata1[i].vitalid;
}
}
if (seriesdata2.length > 0) {
options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series
for (i = 0; i < seriesdata2.length; i++) {
options.series[1].name = seriesdata2[i].name;
options.series[1].data[i] = seriesdata2[i].data;
options.series[1].tooltip = seriesdata2[i].tooltip;
options.series[1].vitalid[i] = seriesdata2[i].vitalid;
}
}
$("#canvas").highcharts(options);
For example: for a Temperature graph I am showing 10 points in the graph, but different points have different unit of measurement like Fahrenheit & Celsius. I am passing unit of measurement as point Value suffix.
But in my case last applied Value suffix is applied to all points of same series.
I want tooltip as per their Unit of measurement/value suffix (eg. 15/5/2014 Temp 90 °C).
you can try some thing like this
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}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
}
You can use tooltip formatter and customise content of your tooltip, including conditions and custom logic.
Hi i tried tool tip formatter to use in following way
if (TooltipMeasureunit != '') {
Tempdata.push({ name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
tooltip: {
formatter: function () {
return valueSuffix = this.TooltipMeasureunit
}
}
});
}
else if (TooltipMeasureunit == '') {
Tempdata.push({
name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
tooltip: {
formatter: function () {
return valueSuffix=this.TooltipMeasureunit
}
//shared: false
}
});
I plan to put the data in y-axis in a mouseover event of my x-axis labels, so that when a user hovers on an x-axis label, it will display a summary text of the values in my stack chart.
Question is how do I access y-axis data inside my x-axis:{...} code
here's my code
http://jsfiddle.net/BkxhA/3/
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>This should be the series y-axis data (this.series.data...something)<p>');
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
Looks like plugin has limitations - in event callback this is pointed to DOM element, instead of something in Highcharts.
To achieve what you need, you can add some custom attribute for created HTML tag in formatter, with info you need. For example passing index:
formatter: function () {
var axis = this.axis,
index = axis.categories.indexOf(this.value);
var n = totals.shift();
return '<div class="stacktotal" data-index="' + index + '">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
Then you can get that value in events:
mouseover: function () {
var chart = $("#container").highcharts(),
index = $(this).find('.stacktotal').attr("data-index");
console.log('Index', index); //index is index of category
var point = chart.series[0].data[index];
console.log('Point', point); // point for specific category in first series
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>' + point.total + '<p>');
},
Demo with all: http://jsfiddle.net/BkxhA/4/