score:5
Accepted answer
to just add a suffix, you'd be ok using the headerformat like:
headerformat: '<span style="font-size: 10px"> {point.key}s </span><br/>'
but since you want to do division in there, you'll need to take complete control with a formatter function:
tooltip: {
formatter: function(d){
var rv = (this.x / 1000).tofixed(2) + "s <br/>";
rv += '<span style="color:' + this.point.color + '">\u25cf</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>';
return rv;
}
},
here's a working example:
$(function () {
$('#container').highcharts({
tooltip: {
formatter: function(d){
var rv = (this.x / 1000).tofixed(2) + "s <br/>";
rv += '<span style="color:' + this.point.color + '">\u25cf</span> ' + this.series.name + ': <b> ' + this.y + '</b><br/>';
return rv;
}
},
series: [{
name: 'short',
data: [[1.23 * 1000, math.random() * 10], [2.343 * 1000, math.random() * 10],[3.343 * 1000, math.random() * 10],[4.343 * 1000, math.random() * 10],[5.343 * 1000, math.random() * 10]]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
edits
here's an updated version of your fiddle.
with multiple series you want a shared tooltip and loop the points object:
tooltip: {
formatter: function(d){
var rv = (this.x / 1000).tofixed(2) + "s <br/>";
this.points.foreach(function(d){
rv += '<span style="color:' + d.color + '">\u25cf</span> ' + d.series.name + ': <b> ' + d.y + '</b><br/>';
});
return rv;
},
shared: true
},
full working code:
$(function () {
$('#container').highcharts({
chart: {
zoomtype: 'xy'
},
title: {
text: 'profile'
},
subtitle: {
text: '(pressure & velocity vs. dispense time)'
},
xaxis: [{
//categories: [0,48,98,150,200],
//labels:{rotation:-45, step:0}
title: {
enabled: true,
text: 'seconds from start' //seconds from start of dispense
},
name: 'test',
labels: {
formatter: function () {
return highcharts.numberformat(this.value / 1000, 3);
}
},
crosshair: true
}],
yaxis: [{ // primary yaxis
labels: {
formatter: function () {
return this.value + ' psi';
},
style: {
color: '#4572a7'
}
},
title: {
text: 'pressure',
style: {
color: '#4572a7'
}
},
opposite: false
}, { // secondary yaxis
gridlinewidth: 0,
title: {
text: 'vel', //pallet
style: {
color: '#89a54e'
}
},
labels: {
formatter: function () {
return this.value + ' mm/s';
},
style: {
color: '#89a54e'
}
},
opposite: true
}],
tooltip: {
shared: true,
formatter: function(d){
var rv = (this.x / 1000).tofixed(2) + "s <br/>";
this.points.foreach(function(d,i){
rv += '<span style="color:' + d.color + '">\u25cf</span> ' + d.series.name + ': <b> ' + d.y;
if (i === 0){
rv += ' psi';
} else {
rv += ' mm/s';
}
rv += '</b><br/>';
});
return rv;
},
valuedecimals: 4,
},
plotoptions: {
spline: {
marker: {
radius: 1,
}
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 100,
verticalalign: 'top',
y: 20,
floating: true,
backgroundcolor: '#ffffff'
},
series: [{
name: 'psi',
color: '#4572a7',
yaxis: 0,
data: [
[0, -8.527222],
[48, -8.19928],
[98, -8.19928],
[150, -8.19928],
[200, -8.19928]
],
tooltip: {
valuesuffix: ' psi'
},
marker: {
radius: 2
}
}, {
name: 'vel',
color: '#89a54e',
yaxis: 1,
data: [
[0, 5.376344e-02],
[48, -5.376344e-02],
[98, -1.075269e-01],
[150, 0],
[200, -2.688172e-01]
],
tooltip: {
valuesuffix: ' mm/s'
},
marker: {
radius: 2
}
}, {
name: 'vel',
color: '#29a54e',
yaxis: 1,
data: [
[0, -0],
[48, 4.032258e-01],
[98, -0],
[150, 4.032258e-01],
[200, -4.032258e-01]
],
tooltip: {
valuesuffix: ' mm/s'
},
marker: {
radius: 2
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
Source: stackoverflow.com
Related Query
- How to modify Highcharts x-axis tooltip text
- how to pass values to tooltip which not in x and y axis in highcharts
- How to edit tooltip in Highcharts C# code
- how to use highcharts tooltip formatter in python code
- How to edit the tooltip text in a highcharts boxplot
- Highcharts - how to access category of multiple axis of the point from tooltip
- How to add text labels to a numerical x axis in Highcharts
- How to set point in highcharts when x axis and y axis has data as text values?
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- How to hardcode arbitrary Tick text labels on y axis in highcharts
- How to modify highcharts legend item click event?
- how to set the interval of points on Y - Axis highcharts
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- How to change the text color in Highcharts
- Highcharts - How to display legend symbol inside the tooltip
- Javascript Highcharts v3.0.5 - How to hide Y Axis Title when using multiple Y Axis
- Highcharts how to change x axis options
- Highcharts - How to start x axis from an arbitrary value
- Highcharts how to remove headers from tooltip
- Highcharts - How to hide series name and Y value in tooltip
- Highcharts - How to remove connecting line between fixed tooltip and point
- Tooltip text alignment in Highcharts for 'direction: rtl'
- how to add annotation text to a Highcharts chart?
- How to add space between chart and axis in highcharts
- Highcharts - How to remove tooltip arrows
- How to change axis label size when exporting in Highcharts / Highstock
- How to enable or disable a Highcharts tooltip when a button is clicked?
- How to show only specific x-axis values on datetime axis in Highcharts
- How to remove text which was added via chart.renderer in Highcharts
- highcharts tooltip text align
More Query from same tag
- How to get Highcharts xAxis co-ordinate?
- highcharts using pie chart plotOptions
- Angular 3rd party library interaction
- Highcharts Treemap, drillup event
- Highcharts not being drawn in some cases when using data from MySQL (page elements created before database query complete?) PHP / MySQL
- Show only three levels of highchart Sunburst always on each click in Angular8
- how to handle mouse over event in legend in highcharts?
- Integrate highcharts-custom-events with React
- Highstock: Plot name labels
- HighCharts - Add dynamic new functions
- Highchart angular directive doesn't redraw from dynamic (ajax) data table
- Highcharts context menu hidden behind series
- Highcharts - x axis incorrect date labels appearing
- Cannot dynamically update highchart in javascript
- Skipping weekends with Highcharts Gantt
- How can we add chart context menu in highcharts-angular?
- How to access outer scope variables within a click function in HighCharts
- highchart.. browser stop working on loading a chart
- highcharts-ng ajax data load
- Set (Sigma) Symbol as custom button text in Highcharts
- Setting Additional Data to highcharts tooltip with formatter doesn't work if points count exceed threshold
- Highcharts in Power BI
- Highcharts x-axis cannot be seen when range is huge
- Column rang chart is not getting reset when click on legends in highcharts
- highstock Plotbands to mark certain Daytimes on X Axis
- Highcharts, multi stacked bar with shared legend items
- Draw symbols between bars in highcharts
- How to set a full length background in a Highcharts bar chart?
- Webpack Highcharts Plugin IIFE
- Bars does not show up when loading JSON encoded data from PHP in Highcharts