score:0
This goal can be achieve by using pointFormat
or pointFormatter
. There are couple of example using pointFormatter
, So i will use pointFormat
attribute to achievethis goal.With this approch you dont need to enable useHTML
property.
tooltip: {
pointFormat:
'<svg width="10" height="10" style="color:{series.color}">●</svg>
<b>{series.name}: {point.percentage:.0f}%</b>
<br/>',
shared: true
},
Highcharts.chart("container", {
chart: {
type: "column"
},
title: {
text: null
},
credits: {
enabled: false
},
xAxis: {
categories: ["Apple", "Orange", "Grapes", "Mango", "Pinapple", "Papaya"],
title: "Fruits"
},
yAxis: {
min: 0,
floor: 0,
ceiling: 100,
title: {
text: null
},
labels: {
align: "right",
x: 0,
y: -2
}
},
tooltip: {
pointFormat:
'<svg width="10" height="10" style="color:{series.color}">●</svg> <b>{series.name}: {point.percentage:.0f}%</b><br/>',
shared: true
},
plotOptions: {
series: {
stacking: "normal"
}
},
series: [
{
name: "Small",
data: [5, 3, 4, 7, 2, 3],
color: "#A2CD32"
},
{
name: "Large",
data: [2, 2, 3, 2, 1, 2],
color: "#FFF500"
},
{
name: "Medium",
data: [3, 4, 4, 2, 5, 2],
color: "#FF220"
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
score:5
Here's how to display the the SVG from the legend item in the tooltip (works for columns and pattern fill):
tooltip: {
useHTML: true,
pointFormatter: function() {
var point = this,
series = point.series,
legendSymbol = "<svg width='20' height='20'>" + series.legendSymbol.element.outerHTML + "</svg>";
return legendSymbol + series.name + ": <b>" + point.y + "</b><br/>";
}
}
useHTML
must be enabled to make it work.
Live demo: https://jsfiddle.net/kkulig/adr9otbg/
Source: stackoverflow.com
Related Query
- Highcharts - How to display legend symbol inside the tooltip
- how to display 2 same highcharts without duplicate the code
- Highcharts -> how to add vertical title to bar? how to make the symbol in the legend a rectangle?
- How do i color the highcharts legend square symbol when my chart has multiple color entries
- How do I have text display within the inside of a stacked bar graph in highcharts
- Display tooltip on hovering over the legend using Highcharts and jQuery-ui tooltip plugin
- How to display Date in Highcharts tooltip or below the categories
- How to customize a legend in highcharts as the image and while clicking on the leg end appears lines inside linechart
- How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?
- How to display the value instead of percentage in a pie chart using jquery Highcharts
- How to use the tooltip formatter and still display chart color (like it does by default)?
- How to display highchart series line marker symbol from tooltip formatter?
- Is it possible to hide the line & symbol next to Highcharts legend items?
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
- How do I remove the color swatch from my HighCharts legend without affecting the column?
- How to get the highlighted point from shared tooltip formatter, Highcharts
- Highcharts : How can i move the tooltip to external DIV?
- Compare two data points inside the tooltip in a Highcharts combination chart
- How to edit tooltip in Highcharts C# code
- How can I display the outcome of the for loop in highcharts
- How to keep the highcharts legend "on" while hiding the series
- 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 edit the tooltip text in a highcharts boxplot
- How to show the legend in HighCharts
- How to move the legend in Highcharts
- In a Highchart, how to display the legend text in next row if the text is too long?
- How can I add a text link just below the legend box in highcharts
- How can I set the legend symbol color for a series when using colorByPoint?
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
More Query from same tag
- Highcharts Pie chart
- Live multiple series with highchart
- Highstock: xy zooming with panning
- Highcharts returning error #15
- Need to place two stack charts side by side sharing single configuration settings
- Add new series to the top of a highcharts stacked column chart
- Prevent xAxis of column highchart taking negative labels on hiding one of other series(on legendItemClick event)
- Highcharts: Credits on multiple lines
- Having some trouble loading highcharts using backbone and rails
- Highcharts marker after plotline
- Can color of data label be different inside and outside of the bar in Highchart
- Highstocks tooltip Remove the phrase "Week From Monday"
- Highcharts columns overlapped
- Displaying multiple graphs on one page using lazy high charts
- Highcharts: negative value in hebrew
- highcharts: bubble charts: can I render the bubbles higher, not centered?
- How to populate multi table data in jquery High-chart
- Change Higcharts Tooltip value
- Dyanamic highchart with csv/txt input file
- Highcharts gantt chart task progress indicator data labels for multi-color in a single task progress
- Highcharts, how can I start xAxis on an arbitrary time
- How to Apply Rotation to Drilldown Lable in Highcharts
- Adding data to Highcharts after initial rendering
- How To Merge Highcharts Legends With All Unique Entries
- Full width arearange
- Tooltip text alignment in Highcharts for 'direction: rtl'
- HighChart Libraries for Android and IOS
- Java Client for HighChart Export server REST service
- Highcharts : Showing wrong color in data series
- Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts