score:7
I'm not quite sure how this override happens, but as you mention the tooltip.formatter
takes precedence. Instead of using tooltip.formatter
move the same function to plotOptions.series.tooltip.pointFormatter
. This should work as you expect, with the plotOptions
pointFormatter
being used in general and your series
pointFormatter
being used in the specific cases.
For example (JSFiddle):
plotOptions: {
series: {
tooltip: {
pointFormatter: function () { return 'Default ' + this.x + '</b> is <b>' + this.y + '</b>'; }
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
pointFormatter: function () { return 'Custom Format...'; }
}
}]
score:3
to avoid the overwrite you need to use option headerFormat for the chart tooltip and define point format for the individual series
https://api.highcharts.com/highcharts/tooltip.headerFormat
the syntax is a bit different but at least it provides basic formatting options
let's say you want custom date format and manipulate font size and color,
your code should look like this:
Highcharts.chart('container', {
tooltip: {
valueSuffix: '',
xDateFormat: '%a, %b %e at %l:%M %p',
headerFormat: '<span style="font-size: 14px; font-weight: 500; color: #8995a0;">{point.key}</span>',
},
...
}
... and for certain series, specify a modified formatter:
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
pointFormatter: function () { return 'Custom Format...'; }
}
},
...
]
Source: stackoverflow.com
Related Query
- Change Highcharts tooltip formatter from chart Object , after chart is rendered
- how to use highcharts tooltip formatter in python code
- Format Highcharts chart tooltip pointFormat in formatter
- Highcharts column chart returning incorrect series index on click when using shared tooltip
- How to hide Series Name in HighCharts Tooltip when using pointFormatter
- HighCharts Pie Chart - Displaying multiple series values in Tooltip
- How to use the tooltip formatter and still display chart color (like it does by default)?
- Highcharts tooltip formatter
- Weird character in front of Highcharts tooltip series names
- Display tooltip for invisible series in Highcharts
- How can I use chart tooltip formatter in react-highcharts?
- Highcharts Pie Chart ignores percentageDecimals tooltip setting and has floating point inaccuracy issue
- Highcharts - How to hide series name and Y value in tooltip
- highcharts - chart names for multiple pie chart series in one chart
- Highchart/stock tooltip formatter for both series and flags
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Show value of last point as label or tooltip on Highcharts Stock Chart
- Highcharts - Scatter chart with a line connecting the dots in the series
- Highcharts shared tooltip for line series and scatter plot not working
- Show HighCharts tooltip when chart loads
- Highcharts custom renderer chart and tooltip
- How to hide one series data info in tooltip using highcharts
- Highcharts 3.0, area chart with stacked and unstacked series - how to fix?
- Highcharts add tooltip that has a small arrow pointing toward the series
- HighCharts tooltip appearing behind the dialog holding the chart
- Highcharts JS- add third variable to tooltip for two series
- Highcharts - Remove first marker from Area chart in every series
- Highcharts - Area Chart - Stacking with series containing negative and positive values
- unable to get series id in HighCharts chart
- Highcharts stock chart - Technical Indicators - Stock price is missing in the tooltip when selecting the 'All' range
More Query from same tag
- Tick position on X axis
- auto refresh javascript without loading whole page
- highcharts - error in IE - Invalid Argument
- How to select array from Highchart.series?
- highcharts, possible bug setting tooltip formatter and html?
- Gradient on sankey diagram
- Polar type chart with Highcharts plugin
- Including jquery and highcharts library
- How to construct HighCharts data series to match returned Json via ajax call
- Highcharts clickable column to open another page on same site
- Highcharts chart axis exceeding set min and max values
- HighCharts + xAxis label formatter
- Highmaps hover effect/mouseout color change
- Highcharts date not showing correctly on x-axis
- How to set the x axis of HighCharts to intake DateRange
- Formatting plot options for pie charts
- Is it possible to define custom technical indicators, that takes 2 series as input?
- Highcharts JSON formatting - splitting up and preprocessing data for charts?
- Highcharts xrange styling
- How to export charts in multiple sizes with Highcharts?
- Formatter Function not working in Highstocks
- How to place one highchart on top of another
- Bootstrap+HighCharts.js Responsive Image Position in Donut Chart
- How to show current value on two x-axis using Highcharts?
- Same Highchart in different tabs not loading - Only first Tab loading
- How to force start on min/max and prevent automatic rounding
- How to change tooltip valueSuffix after chart is rendered?
- Highstock highcharts irregular data gets wrong x-scale
- show only last x points on Highchart
- Highchart - Set Time(Hour:Minute) on X axis