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
- JSON, Highcharts and Coldfusion json data
- HighCharts Bullet Chart display data label of the target
- How to implement the interconnection between nodes in network graph using javascript?
- Content of highchart tooltip getting overflow
- Callback and Testing Highcharts
- Highcharts with Google Analytics Oauth 2.0
- How to give color according to the percentage in Highchart - JavaScript
- How can I add enhanced tooltip content to heatmap
- How to add percent symbol with data inside column in highchart?
- How to have a foreach inside a foreach in JQuery?
- highcharts date not displayed properly on x axis
- HighCharts multiple axis not recognized
- Random number on Highcharts + AngularJS
- page on ie 9 displays only after developer tools refresh, not before
- Stack line on area / stack area on line in highcharts?
- Highstock timeseries chart is shrinked
- How to push Json data to line chart function
- Update json array values in javascript
- body click issue with highchart library
- HighCharts: loading from csv file, blank page in HTML/JS
- Highcharts - Bubble losing focus without exiting the chart
- add chart using highcharts to angular via highcharts-ng directive
- change the legend.y property on browser resize
- Highcharts checkboxes multiply when window resize event fires
- Boost Enable/Disabled with update Method in Highcharts
- Highcharts slow performance when adding more than 10 series
- Highcharts json php multiple series
- How to position datalabel at the base of bar series
- Need tooltip in customization
- Value or Logic Dependent Data Label format in Highcharts