When i exported chart in internet explorer (version 11.0.9600.17691). As you can see in below image, data labels are repeated. I don’t have this issue when using Chrome.
Please suggest.
I have set the textShadow blank and it works for me.
plotOptions: {
series: {
grouping: true,
pointPadding: 0,
borderWidth: 0,
dataLabels: {
enabled: true,
crop: false,
formatter: function() {
return this.y.toFixed(1);
},
style: {
textShadow: ''
}
}
}
Related
I am implementing a chart with highcharts based on vue.js.
LineWidthPlus function works well on hover, but lineWidthPlus does not work on select.
This is part of my code.
plotOptions = {
series: {
lineWidth: 2,
boostThreshold: 1,
allowPointSelect: true,
stickyTracking: false,
states: {
hover: {
enabled: false,
},
select: {
enabled: true,
lineWidthPlus: 10,
},
},
}
What is the cause and if there is a demo, please tell me the demo url. thank you.
I'm using Highcharts in an Angular 8 application, and while the chart itself renders quite fast, I am encountering some seriously degraded performance rendering tooltips on charts bound to larger data sets. Interestingly the issue seems less related to the number of data points than to the amount of the plot area series fill.
We are using Boost (in app.module.ts):
Boost(Highcharts);
NoData(Highcharts);
More(Highcharts);
NoData(Highcharts);
theme(Highcharts);
and this is is the chart's config (series are added dynamically):
public baseChartOptions: Highcharts.Options = {
chart: {
type: 'line',
zoomType: 'x',
animation: false,
height: '55%'
},
boost: {
enabled: true,
useGPUTranslations: true,
usePreallocated: true
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
exporting: { enabled: false },
plotOptions: {
series: {
lineWidth: 1.5,
animation: false,
marker: {
enabled: false
}
}
},
xAxis: [
{
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d'
}
} as Highcharts.XAxisOptions
],
yAxis: [
{
minorTickLength: 0,
tickLength: 0,
title: {
text: ''
}
}
],
tooltip: {
shared: true,
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:.0f}</b><br/>',
animation: false
},
series: []
};
What are best practices for ensuring the best performance in rendering tooltips? I've seen the Highcharts demo showing over 1,000,000 points with good performance, but I don't seem to be able to achieve the same.
I've included a short video converted to gif that illustrates the behavior I'm seeing at three different data densities.
Thanks for your help!
highcharts tooltip performance
The performance should be better when you disable shared tooltip:
tooltip: {
animation: false,
valueDecimals: 2,
shared: false
}
Demo:
http://jsfiddle.net/BlackLabel/xhpqedrt/1/
I am trying to find a solution where I am able to set images on the top of each bar. At the moment I didn't found the solution yet.
I tried:
To set the images by adding a new serie of type 'scatter' with the same value as the bar chart serie and a marker with the image as symbol. But if I have multiple series of type 'bar' the points of the scatter serie are set in the middle and not on the top of each bar. I also want to keep the grouping if series are linked to the same category.
const weather_serie = {
type: 'scatter',
data: this.visualisationService
.generate_serie(this.categories[elem], weather, this.period)
.map((val, index) => {
if (val.hasOwnProperty('weather')) {
return {
y: isNaN(visit_serie.data[index])
? 0
: visit_serie.data[index],
marker: {
symbol: 'url(https://openweathermap.org/img/w/${
val.weather
}.png)'
}
};
} else {
return NaN;
}
}),
enableMouseTracking: false,
showInLegend: true
};
To set the images by adding the datalabel and format it inside the chart options. But I didn't found how to set unique images linked to the correct bar chart inside the same category. Some other remarks are that the image is not in the middle of the bar (Starts from the bottom left of the image) and when hovering the tooltip is shown behind the image.
plotOptions: {
bar:{
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function() {
return '<img src="http://highcharts.com/demo/gfx/sun.png"><img> ';
}
}
}
In the first case, you should disable grouping on series:
plotOptions: {
series: {
grouping: false
}
}
Live demo: http://jsfiddle.net/BlackLabel/v7qx1s5u/
In the second case, you can define individual data label for point:
series: [{
type: 'column',
data: [{
x: 0,
y: 1,
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function() {
return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img>';
}
}
},
[1, 2],
[2, 3]
]
}]
or in formatter function define some rules where the data label should be some image:
dataLabels: {
align: 'center',
enabled: true,
useHTML: true,
formatter: function(){
if (this.point.index === 1){
return '<img src="https://www.highcharts.com/samples/graphics/sun.png"><img> ';
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/72Lahvp4/
I am using highcharts to display data in my rails app. A picture speaks a thousand words...
Basically I am trying to get the y axis labels to be the bar chart datalabels and concatenate with the value....
So for the first bar, the datalabel would be "idiopathic pulmonary fibrosis 37"
The chart is being passed a variable "data" which is an array of objects that you can see in the console (5 objects in total with the attributes, count, name and y).
My plot option set up is this:
plotOptions: {
series: {
dataLabels: {
format: '{x}',
enabled: true,
align: 'right',
color: '#294469',
shadow: false,
x: -25,
style: {"fontSize": "10px", "textShadow": "0px" }
},
pointPadding: 0.1,
groupPadding: 0
}
},
I can replace the format with '{y}' and that give me the value, but I can't get the string in there. Any thoughts....
You need to use formatter function for datalabels.
dataLabels:{
enabled: true,
formatter: function () {
return this.x +" "+ this.y;
}
}
See Demo here
This is what worked.
dataLabels: {
formatter: function() {
return data[this.x].name + " " + data[this.x].y;
},
enabled: true,
align: 'right',
color: '#294469',
shadow: false,
x: -10,
style: {"fontSize": "10px", "textShadow": "0px" }
}
I'm generating a series of highcharts and then exporting them to a pdf via jsPDF. They display fine on screen, but when I export an image of the graphs, it duplicates the X axis category labels.
Here is my chart code:
$('#chart').highcharts({
chart: {
type: 'column',
spacingBottom: 0,
spacingTop: 20,
spacingLeft: 0,
spacingRight: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: {
categories: ['Sales Performance',],
labels: {
style: {
color: '#000'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}%',
overflow: 'justify',
style: {
color: '#000'
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '% Change',
color: '#c0504d',
data: [4.5]
}]
});
And an example of the issue: http://jsfiddle.net/212qb8qs/
Any ideas???
UPDATE:
The issue was with canvg converting the svg. Solved thanks to this comment: When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?
Well, from your jsfiddle, you use canvg along with highcharts to get a canvas and then convert to PDF what you get. The problem comes from canvg wich seems to handle a bit strangely the tspan that are used in the SVG generated by highcharts (mostly for titles).
So I redirect you to my answer in another question here , where you'll find a dirty fix for that.