score:3
you can do it like this: http://jsfiddle.net/fspzj4xw/
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function () {
s += '<br/>' + '<span style="color:' + this.series.color + '"> ●♦▲▼■ </span>' + ' ' + this.series.name + ': ' + this.y + 'm';
});
return s;
},
shared: true
},
score:3
a lightweight solution would be to hook up to the series afterinit
event and add the symbols:
highcharts.addevent(highcharts.series, 'afterinit', function() {
this.symbolunicode = {
circle: '●',
diamond: '♦',
square: '■',
triangle: '▲',
'triangle-down': '▼'
}[this.symbol] || '●';
});
view live demo: http://jsfiddle.net/pjqz79pv/1/
score:6
i can see this is an older thread, but since the highcharts api appears to differ on some points since the original post i'm providing an update here with the details that just worked for me in case this is helpful to others...
i'm using highcharts js v4.2.6 (2016-08-02) (along with highcharts-ng 0.0.12) and wasn't able to access the this.point.graphic.symbolname
property to implement james donnelly's solution -- instead i had to modify it to access this.series.symbol
.
the symbols that appear in the switch statement are being rendered from their utf-8 geometric shapes codes so it is necessary to structure the switch statements in the following fashion symbol = 'charactercodegoeshere';
. (ex: symbol = '●'; in the case of the circle character)
the following code ultimately rendered the correct symbol in the correct color in the chart's tooltip for a given series:
tooltip: {
style: {
padding: 10,
fontweight: 'bold'
},
usehtml: true,
formatter: function () {
var symbol;
switch ( this.series.symbol ) {
case 'circle':
symbol = '●';
break;
case 'diamond':
symbol = '◆';
break;
case 'square':
symbol = '■';
break;
case 'triangle':
symbol = '▲';
break;
case 'triangle-down':
symbol = '▼';
break;
}
return highcharts.dateformat('%b %y', this.x) + '<br/>' + '<span style="color:' + this.series.color + '; font-size: 1.5em;">' + symbol + '</span> ' + this.series.name + ': ' + this.y;
}
}
the highcharts.dateformat() method was used to format epoch-millisecond timestamps for display.
score:43
i'm posting my own answer here as kacper madej's answer here doesn't really answer the question at all, it simply places the 5 different symbols highcharts uses in the same tooltip:
this answer does work if we're using multiple colours, but it'd fail completely if all our series had the same colour - you may as well not display them at all.
pulling the relevant symbol into our tooltip
highcharts exposes a symbolname
property within its graphic
object which is a property itself on the point
object itself. the shapes it uses are:
"circle"
●"diamond"
♦"square"
■"triangle"
▲"triangle-down"
▼
with this information, we can construct a switch
statement within our tooltip.formatter()
function which maps the relevant symbol with the symbol name that highcharts exposes:
var symbol;
switch ( this.point.graphic.symbolname ) {
case 'circle':
symbol = '●';
break;
case 'diamond':
symbol = '♦';
break;
case 'square':
symbol = '■';
break;
case 'triangle':
symbol = '▲';
break;
case 'triangle-down':
symbol = '▼';
break;
}
we can then place the symbol within our tooltip by referencing our symbol
variable:
return this.x + '<br/>' + symbol + ' ' + this.series.name + ': ' + this.y;
adding colour
we can then extend this to colour in our point to match the colour of the series. this simply involves wrapping our symbol
in a <span>
element, and giving it a style
set to the colour of the series, which highcharts gives us through this.series.color
:
'<span style="color:' + this.series.color + '">' + symbol + '</span>';
ensuring the symbol exists
before putting this into production, however, you should be aware that sometimes a tooltip will appear for a point which has neither a graphic
object or a symbolname
property at all. this can occur when a point exists outside of the visible bounds of our chart - a tooltip will appear when hovering over the line, but the point itself isn't visible so has no need for any graphical-related properties.
to prevent javascript errors, we need to wrap our switch
statement in the following if
clause:
if ( this.point.graphic && this.point.graphic.symbolname )
with this, you'd also want to initially define your symbol
variable as an empty string (''
) so that it doesn't display as undefined in our tooltip:
var symbol = '';
handling custom marker images
for this example i've used the following image:
it's worth noting that whilst this solution works fine for this question, it will fall down when dealing with custom marker images - when these are used, there is no graphic
object or symbolname
property, and as we're using our own image we wouldn't want to display any of the shapes above anyway.
the first thing to do is tell highcharts that we want to use html within our tooltip. we can do this by specifying usehtml: true
on our tooltip
object:
tooltip: {
formatter: function() { ... },
usehtml: true
}
fortunately, highcharts tooltips support the html <img />
element and allow us to pull the custom image url through the symbol
property within the marker
object using this.point.marker.symbol
.
this.point.marker.symbol
-> "url(http://i.imgur.com/uzhiqfq.png)"
the second hurdle is removing the url(
and )
surrounding the actual image url. for this we can use a regular expression to match the bits we want to remove. the regular expression i've gone with is /^url\(|\)$/g
, which is visualised as:
the g
at the end states that we want to pull any matches, so we can replace both url(
and )
in one foul swoop:
var url = this.point.marker.symbol.replace(/^url\(|\)$/g, '');
-> "http://i.imgur.com/uzhiqfq.png"
we can then place this into our <img />
element, and store that in our symbol
variable:
symbol = '<img src="' + url + '" alt="marker" />';
finally we want to ensure that the marker
object and symbol
property exist. i've chosen to do this as an else if
on top of the original if
statement declared in the ensuring the symbol exists part above:
if ( this.point.graphic && this.point.graphic.symbolname ) { ) { ... }
else if ( this.point.marker && this.point.marker.symbol ) { ... }
Source: stackoverflow.com
Related Query
- How to display highchart series line marker symbol from tooltip formatter?
- How to add a vertical plot line in multiple line series and show the tooltip on Plot line in highchart
- How to draw line from Data label to Marker in Highchart Scatter Plot
- How do I fix highchart to display series correctly with a special marker
- How to display basic line graph in Highchart for multiple categories' data from csv?
- How to use the tooltip formatter and still display chart color (like it does by default)?
- Highcharts - How to display legend symbol inside the tooltip
- Highchart how to animate from the xaxis bottom line upward
- How to do In highchart tooltip display the first 100 characters and then say "See more .."?
- how to use highcharts tooltip formatter in python code
- How to display line break for irregular time series with highcharts
- How to display fixed tooltip position in a multiple series highchart?
- How to render a line from dataLabels to marker on graph in HighCharts?
- Highstock - How can i display the open, high, low, close in the line or area charts tooltip
- How to hide series name from tooltip in Highcharts scatter plots for linear regression
- How to call Highcharts tooltip formatter function from outside the config object?
- How can i access data from series in tooltip
- Highstock: How do i display the series name along the line
- How to get series marker symbol when displaying shared tooltips?
- how to display menu from date in highchart
- How to plot a highstock single line series graph from ajax data
- How to display grid line on top of highchart
- How to display custom data on mouseover of column chart in highchart in addition to series data?
- Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
- How To Show Tooltip In Sparkline Chart From Code
- How to plot new chart from already displayed highchart series
- How to remove cirlce,line,square symbol from highchart
- How to set tooltip border color from series in Highcharts
- How do I show multiple line from dynamic data using javascript in highchart
- Highchart Data from HTML table with line series
More Query from same tag
- Second popup representing Highchart not working on leaflet geojson polygon
- How to unite function index and function data to one new function?
- How to remove Series name on bottom and we are not getting bar value on top of each bar and also each bar description is aligned cross in Columnchart
- How to move line series in Highchart?
- having sorted multi column chart with unsorted series in highchart-ng module
- show .Net core web API response in highcharts
- highcharts opacity when "bubbles" are stacked
- min-height to chart container if no data with highcharts.js
- HighCarts Pie not showing value in pie label
- Export Table and Chart In PDF In HIGHCHART with ANGULAR
- Overlapping loading of jQuery scripts
- Highmaps get() function on a secondary series
- In Highcharts, zooming a small selection up to the edge, zooms both x and y when zoomtype = x
- X axis labels overlap tooltip in column chart in highcharts
- Highcharts chart option backgroundColor:'transparent' showing black on IE 8
- How to hide other series when clicking on legend on highcarts?
- How to get object value inside an array
- Highcharts points and lines are missing
- Highcharts stock chart - Technical Indicators - Stock price is missing in the tooltip when selecting the 'All' range
- URL Link in Tooltip
- Use Highcharts-ng with JSON
- R Highcharter: Polar graph having conditional colors
- Changing bar colors on data that is within the same series data
- Skip yAxis gridLines if there is no data in them
- HIGHCHARTS, Replace zero with 0.1 >
- Scrape data from a highchart using selenium
- HighCharts: How to aligned horizontal yAxis title
- Structure of objects expected in series data
- Change window position with button HighStocks
- R Highcharter Drilldown Set Ymin & Ymax + Title for each layer