I want to display brand logo in legend (line chart).
legend: {
enabled: true,
useHTML: true,
labelFormatter: function () {
console.log(this.userOptions.image)
return '<img src="' + this.userOptions.image + '" alt="" >';
}
},
this code working fine but first time legends overlap
Please check this example :
Example
The problem is that you haven't specified width/height for that image. So while rendering, img tag is 0x0 px. Working example: http://jsfiddle.net/1r3tfh5b/2/
labelFormatter: function () {
console.log(this.userOptions.image)
return '<img style="width: 30px; height: 30px;" src="' + this.userOptions.image + '" alt="" >';
}
Related
Is it possible to display images in highcharts wordcloud when it is a URL of an image? Instead of displaying the URL itself I want to display the image.
Sample data point in a series
chart.options.series[0].data.push(
{ name: 'test name',
weight:10,
color: "#ffffff",
dataLabel: {
useHTML: true,
enabled: true,
formatter: function() {
let r = Math.random();
if (r > 0.5)
return '<img src="http://www.highcharts.com/demo/gfx/sun.png" style="width: 30px; vertical-align: middle" />';
else
return '<img src="http://www.highcharts.com/demo/gfx/snow.png" style="width: 30px; vertical-align: middle" />';
}
},
className: condition ? 'fade-out' : ''
});
This is what I am trying http://jsfiddle.net/ramakrishnan3/c18xdeLz/1/ a similar way works for parallelcoordinates https://jsfiddle.net/ramakrishnan3/kvfyutqj/10/
How can I customize the legends
From
To this
check highcharts legend api options.You can further customize with desired css. use proper svg image (background color is taken from chart itself)
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: -50,
y: 120,
symbolPadding: 0,
symbolWidth: 0.1,
symbolHeight: 0.1,
symbolRadius: 0,
useHTML: true,
symbolWidth: 0,
labelFormatter: function() {
if(this.name=="Microsoft Internet Explorer"){
return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_508736.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
}
if(this.name=="Chrome"){
return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_159842.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
}
if(this.name=="Firefox"){
return '<div style="width:200px;"><span style="float:left; margin-left:10px"><img src = "http://cdn.onlinewebfonts.com/svg/img_261106.svg" width = "40px" height = "40px" style="background-color:' + this.color + ';"></span><span style="float:right;padding:9px">' + this.percentage.toFixed(2) + " " + this.y + '%</span></div>';
}
},
itemStyle: {
color: '#ffffff',
fontWeight: 'bold',
fontSize: '19px'
}
},
Fiddle demo
You can modify legend. To display custom icons in place of legend symbols, you need to set legend.useHTML with true value, hide symbol with:
.highcharts-legend-item rect {
visibility: hidden;
}
and use labelFormatter. Take a look at the example posted below.
API Reference:
http://api.highcharts.com/highcharts/legend
Example:
http://jsfiddle.net/2trc1gv9/
I have taken an example Highcharts plnkr and edited it to match my requirements.
Below is the plnkr that I have developed. https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview
Here all the labels and icons for the labels are displayed properly. But when I include it in my application, the icons for the labels are not displayed properly.
It is displayed as below
My label code is as below
labelFormatter: function () {
return '<div class="legend-label-md row" style=" border-bottom:1px solid black; margin-bottom: 5px"><span class="col-md-10">' + this.name +
'</span><span class="col-md-2" >' + this.value +
'%</span></div> ';
}
Please see attached image from below link. i am making chart of dummy data for a local project.
Problem Statement:
My problem is when i set userHTML: true in below code, it move my x-axis labels to up. but when i remove this line, my labels are on their right position. but i need useHTML true and their right position same time.
xAxis: {
categories: seriesDataMonthName,
title: {
text: 'Month/Year (Charge Date of Service)'
},
labels: {
useHTML: true,
formatter: function () {
return '<a style="display:inline !important" class="clsCPTTrendingChart" data-toggle="modal" data-target="#myModal" name="' + this.value + '">' + this.value + '</a>'
},
}
},
Thanks for comments. I simply remove the useHTML: true and call javascript function directly in tag. It works for me.
Please look at the example. I've created on jsfiidle.
http://jsfiddle.net/cr1t/LdLn2/1/
The issue I'm having is with the tooltip that floats above the graph. The text on the column range seems to have a much higher z-index. But no matter what I try and set it on the div style sheet, it shows threw. I'd like the have the point detail in html, because I want to make it a hyperlink tag.
plotOptions: {
columnrange: {
dataLabels: {
inside: true,
enabled: true,
useHTML: true,
formatter: function () {
if (this.y === this.point.low) {
return '<div style="padding:2px;text-align:center;color:black;overflow:hidden;width:' + (this.point.plotLow - this.point.plotHigh - 4) + 'px">' + this.point.low + '°C - ' + this.point.high + '°C </div>';
}
}
}
}
},
Thanks Anto
I followed the duplicate.
I managed to get it working the way I wanted with css
http://jsfiddle.net/cr1t/LdLn2/2/
.highcharts-data-labels {
z-index: 1 !important;
}
.highcharts-tooltip span {
background-color:white;
opacity:1;
z-index:9999 !important;
padding:5px
}
.tooltip {
padding:5px
}
and setting the style on the tooltip
tooltip: {
backgroundColor: "rgba(255,255,255,1)",
style: {
padding: '1px'
},
shadow: false,
useHTML: true,
percentageDecimals: 2,
formatter: function () {
return '<div class="tooltop">'+ this.point.category + '<br />' +
'Temprature ' + this.point.low + '°C - ' + this.point.high + '°C </div>'
}
}