hi i am working on highcharts with net transactions on y-axis and type datetime on x-axis. i have shown month and date on x-axis point label as (jan 2016) and want to show the same date format on tooltip. but its showing full date with day as well like "Monday, jan 1, 2016.
here is my js code.
tooltip: {
headerFormat: '<span style="font-size:10px">{point.x:%Y-%m}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:11px;">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
Thanks for any help
Just change your point.X: format string from {point.x:%Y-%m} to {point.x:%b-%Y} as shown bellow
tooltip: {
headerFormat: '<span style="font-size:10px">{point.x:%b-%Y}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:11px;">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:,.0f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
use html in tooltip and format using dateFormat
Highcharts.dateFormat(%Y-%m,this.x)
You should modify the tooltip header format
tooltip: {
xDateFormat: '%b %Y'
}
Or if you want to modify the whole html
tooltip: {
headerFormat: '<b>{point.key:%b \'%y}</b><br>'
}
Related
I'm creating new variablepie highchart js. In that graph how to reduce space(height) of tooltip box. I need to reduce top and bottom space inside the tooltip box.
URL: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/variable-radius-pie
tooltip: {
headerFormat: '',
pointFormat: ' <b>COMPANY</b><br/>' +
'Match Percent: <b>{point.y}</b><br/>' +
'Score Weight: <b>{point.z}</b><br/>',
valueSuffix: ' %',
useHTML: true,
outside: true,
style: {
padding: 0
},
followPointer:true
},
You need to set the padding directly in a tooltip configuration object:
tooltip: {
padding: 0,
...
}
Live demo: https://jsfiddle.net/BlackLabel/eom8tqns/
API Reference: https://api.highcharts.com/highcharts/tooltip.padding
But the main thing is, it will only support numbers not px values
From the servlet I am getting back 3 arrays activeArray,inActiveArray and rejectedArray. I would like to pick these arrays in the java script and come up with a high charts that plots the categories as the blood group names like A+, A- etc.
The series names will be Active, Inactive and rejected.
The series data will have to be the arrays mentioned above.
I was able to achieve only the categories but the series data does not get plotted. I have included the script code below.
<script>
var nameArray ="${nameArray}";
var bloodNames = [
<c:forEach items="${nameArray}" var="name">
'<c:out value="${name}" />',
</c:forEach>
];
var activeValue = new Array();
activeValue = [
<c:forEach items="${activeArray}" var="data">
'<c:out value="${data}" />',
</c:forEach>
];
var seriesData = [
{
name: 'Active',
data:activeValue
},{
name:'InActive',
data:[3, 01, 03,0,0,0]
},
{
name:'Rejected',
data:[4, 01, 03,0,2,0]
}
]
$(function () {
var myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Donar Status Report'
},
subtitle: {
text: 'Blood Name Wise'
},
xAxis: {
categories:
bloodNames
,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Person (in Counts)'
}
},
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: seriesData
});
});
The quotes around the data in the active is the problem. The column chart expecting an integer as data.
You can use Map function to convert array of string to array of number.Rest of your chart is ok
var activeValue= ["1","3","2","2","1","2","0","1","0","0"]
activeValue=activeValue.map(Number)
console.log(activeValue)
I have this chart :
I want to add a unit to the value "4" (value of my xAxis). How can I do that?
Thank you
Hard to tell because no code sent but it looks like your "4" is a series name (or some text item - not a value). To do this you can use the tooltip.formatter like in this example. I have added the "%" to the category (month) text:
tooltip: {
formatter: function() {
return 'The value for <b>'+ this.x +
'%</b> is <b>'+ this.y +'</b>';
}
}
you can do that from tooltip formatter
tooltip: {
formatter:function(){
var formattedX = "unit" + this.x;
return formattedX + 'this value ' + this.y;
}
}
I hope this will help you.
Use tooltip.headerFormat, see: http://jsfiddle.net/3bQne/647/
tooltip: {
headerFormat: '<span style="font-size: 10px">{point.key} cm</span><br/>'
},
tooltip: {
valueDecimals: 2,
valuePrefix: '$',
valueSuffix: ' USD'
}
please check the below link
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/valuedecimals/
i am using this code to display a shared tooltip:
tooltip: {
crosshairs: true,
shared: true,
headerFormat: 'KW {point.key}<table>',
pointFormat: '<tr><td style=\"color: {series.color}\">{series.name}: <b></td><td>{point.y} USD</b></td></tr>',
useHTML: true,
footerFormat: '</table>',
valueDecimals: 2
},
Now i like to add all point.y values as a total value of the point. But how can i loop the point.y of each series to calculate the total value?
Excatly, see example: http://jsfiddle.net/65bpvudh/7/
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>',
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y +'m';
sum += point.y;
});
s += '<br/>Sum: '+sum
return s;
},
shared: true
},
Use the footerFormat property (since version 2.2) with {point.total} to easily show the total without having to re-define the complete formatter function:
tooltip: {
footerFormat: 'Sum: <b>{point.total}</b>',
shared: true,
},
More easy, use total property of point:
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+ point.y;
});
s += '<br/>Total: '+ this.points[0].total
return s;
},
shared: true
},
Check this reference
I have created a graph using high charts.
The tooltip works fine in FF and IE but in chorme the text goes out of the frame.
I tried using HTML
tooltip:
{
//Tried this also
/* formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y;
}, */
useHTML: true,
formatter: function() {
var html="<div style='width:140px;text-align:center; direction:ltr'>"+
Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y+
"</div>";
return html;
}
},
Answer from Highcharts.com:
tooltip: {
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} EUR</b></td></tr>',
footerFormat: '</table>',
valueDecimals: 2
},
Fiddle Here
What exactly do you need?
For example, this creates a shared tooltip with values aligned to right:
tooltip: {
shared: true,
useHTML: true,
formatter: function()
{
tooltip_html = Highcharts.dateFormat('%H:%M:%S', this.x * 1000);
tooltip_html += "<table>";
this.points.forEach(function(entry)
{
tooltip_html += '<tr><td style="font-weight:bold; color:'+ entry.series.color +'">'+ entry.series.name +':</td><td style="text-align: right"> '+entry.y+'</td></tr>';
});
tooltip_html += "</table>";
return tooltip_html;
}
},
DEMO: http://jsfiddle.net/babca/4NuTx/1/