We are working with high volume of data but unfortunately for us Data grouping is not an option, but when using boost module, we have issue with colors kind of gray out.
You can see link to jsfiddle below, please comment boost script out to see the difference when not using Boost.
chart = Highcharts.stockChart('timeline_chart', {
boost: {
useGPUTranslations: true
},
chart: {
zoomType: 'x',
animation: false,
},
legend: {
enabled: true,
align: 'center',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
shadow: true
},
credits: {
enabled: false
},
navigator: {
enabled: false
},
title: {
align: 'center',
text: '',
},
xAxis: {
type: 'datetime',
},
tooltip: {
shared: true,
split: false,
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, 'white'],
[1, '#EEE']
]
},
borderColor: 'gray',
valueDecimals: 2,
},
yAxis: myYAxis,
plotOptions: {
series: {
marker: {
radius: 2
},
animation: false,
}
},
series: mySeries,
});
}
Example in jsfiddle
When you check the notes from the boost module you might see that the lines in area type series won't be drawn. That is why you might think that colours looks flatter.
* Notes for boost mode
* - Area lines are not drawn
* - Lines are not drawn on scatter charts
* - Zones and negativeColor don't work
* - Dash styles are not rendered on lines.
* - Columns are always one pixel wide. Don't set the threshold too low.
* - Disable animations
* - Marker shapes are not supported: markers will always be circles, except
* heatmap series, where markers are always rectangles.
Please compare these two charts:
Without the boost module and without the lines: https://jsfiddle.net/BlackLabel/8u0so132/
With boost: https://jsfiddle.net/BlackLabel/ugocansh/
They look very similar, I can even say that the one with boost looks sharper.
Related
I have attached the screenshot to show the dash line in left side of the chart. It would be helpful if we can achieve the functionality and I tried to increase the width of the border, it is visible slightly. Do you have any proper approach to achieve this?
Code Snippet :
Highcharts.chart('container', {
chart: {
type: 'bar',
charWidth: 520,
chartHeight:300,
margin: [70,0,0,0]
},
xAxis: {
categories: ['Jan'],
visible: false
},
yAxis: {
min: 0,
visible: false
},
plotOptions: {
series:{
stacking:'normal'
},
dataLabels: {
enabled : false,
}
},
series: [{
name: 'John',
data: [{
y: 15
}]
}, {
name: 'Jane',
data: [{
y: 22
}]
}, {
name: 'Joe',
data: [{
y: 33,
}]
}, {
stacking: false,
data: [55],
grouping: false,
dashStyle:'ShortDash',
color: 'transparent',
borderWidth: 2,
borderColor: 'red',
}]
});
Thanks for the response
[![enter image description here][2]][2]
The left side of the bar is connected to the xAxis, which makes the left border less visible. There are some possible solutions to this issue.
You can set the minimum value of the xAxis to -0.1 and set startOnTick property to false. Then the left border is visible (it's not directly connected to the axis).
Demo:
https://jsfiddle.net/BlackLabel/pqy84hvs/
API references:
https://api.highcharts.com/highcharts/xAxis.startOnTick
https://api.highcharts.com/highcharts/xAxis.min
yAxis: {
min: -0.1,
visible: false,
startOnTick: false
}
You can set the borderWidth property to 3. Then the border is visible.
Demo:
https://jsfiddle.net/BlackLabel/01m6p47f/
API references:
https://api.highcharts.com/highcharts/series.bar.borderWidth
{
name: 'Joe',
borderWidth: 3,
borderColor: 'red',
data: [{
y: 33,
}]
}
You can also use SVG Renderer and render the border yourself.
Docs:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Example demo of using SVG Renderer:
https://jsfiddle.net/BlackLabel/2koczuq0/
I am trying to achieve combined 2 Semidonut Pie Charts series to show Current year and Last year percentage with my data .
At the same time I am trying to overlay another series with data which will represent the YOY percentage increase or decrease which will appear as label outside my outer pie as "+50%" , "-60%"
Since YOY can be negative and this disturb's the Pie . I was reading that Pie is not ideal to put the negative numbers but visually in my usecase customer feels this will be great .
I tried to massage the YOY data with negative to multiply with (-1) and put into pie and I kind of able to represent the number outside pie but can't bring the "+" or "-" with "%" as valuesuffix .
I have working example here but again this is with 2 data series ... my 3rd series will be "YOY%" with the datalabel display outside which is not added here as 3rd series with negative bring a weird donut .
Anybody has idea how to implement this solution to represent series 3 with YOY Outside as regular datalabels ?
https://codepen.io/pauldx/pen/BayyJaa
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2017',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series: [{
type: 'pie',
innerSize: '50%',
dataLabels: {
enabled: true,
// inside: true,
distance: -70,
},
data: [
['LYA', 58.9],
['LYB', 28.9],
['LYC', 30.29],
]
},
{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
dataLabels: {
enabled: true,
// inside: true,
distance: -20,
},
data: [
['CYA', 20],
['CYB', 18.9],
['CYC', 70.29],
]
}]
});
As I understood - you would like to add only the dataLabels with calculated YOY value, am I right? Or do you want to add a whole series? If just a dataLabels - there is a guideline how to achieve it by adding custom dataLabels:
events: {
render() {
let chart = this,
yoyValue,
x,
y;
chart.series[1].points.forEach((p, i) => {
if (chart['label' + i]) {
chart['label' + i].destroy();
}
yoyValue = Math.floor(((p.y - chart.series[0].points[i].y) / p.y) * 100);
x = p.dataLabel.translateX - (p.shapeArgs.end == 0 ? -40 : 30);
y = p.dataLabel.translateY;
chart['label' + i] = chart.renderer.text(yoyValue + '%', x, y).attr({
zIndex: 100,
}).css({
fontWeight: 'bold',
color: 'white',
textOutline: '1px contrast'
}).add();
})
}
}
Demo: https://jsfiddle.net/BlackLabel/p82L4ad1/1/
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
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/
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
I'm creating a polar area chart in Highcharts. I'm having issues with the labels being positioned inside the chart. See an example here:
$('#container').highcharts({
chart: {
polar: true,
backgroundColor: 'transparent',
plotBorderWidth: null,
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title:{
text:''
},
subTitle:{
text:''
},
pane: {
startAngle: 0,
endAngle: 360
},
legend: {
enabled: false
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
yAxis: {
min: 0,
lineWidth: 0,
minorGridLineWidth: 0,
gridLineColor: 'transparent',
labels: {
enabled: false
},
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
pointPlacement: 'between',
states: {
hover: {
enabled: true
}
},
dataLabels: {
enabled: true,
format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
style: {
textShadow: false,
width: 150,
fontSize: "16px"
},
}
},
column: {
pointPadding: 0,
groupPadding: 0,
borderWidth: borderWidth
},
},
series: [{
showInLegend: false,
type: 'column',
name: 'Column',
data: data
}],
credits: {
enabled: false
}
});
http://jsfiddle.net/c904atb3/
I notice with the pie charts there are options for "distance" but no such option exists for the polar chart. I'd also like to be able to use "connectors" if possible but I don't see this available for polar either. How can I get more control over these labels?
I've had similar problems getting labels to be "pushed" out from the borders of a polar/spider chart. The way I solved this was to use plot bands to put a ring around the outside rim.
My test can be found here: http://jsfiddle.net/brightmatrix/j3v0zstk/
In this case, I added the following line to your yAxis:
plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]
The values I used are merely for illustration. If you wanted the colored wedges in your chart to truly go out to 10, define a max value for your yAxis and have the plot bands cover what would extend past the chart edges.
The zIndex value of "5" makes sure the plot bands sit on top of your chart wedges to give the desired effect.
I hope this is helpful!
I managed to fix it by allowing the labels to extend outside the container, then setting the container to overflow:visible. Not ideal but it works.
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
padding: 50,
useHTML: true,
verticalAlign: 'middle',
format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>',
style: {
textShadow: false,
width: 250,
fontSize: '22px'
},
}
http://jsfiddle.net/c904atb3/2/
In my production code I added a CSS class to each label based on the name so I can tweak positioning in CSS.
You can set label's coordinates like this:
var data = [{
name: "Label 1",
dataLabels: {
x:100,
y:100
},
y: 10,
color: "#9fe642"
},
http://jsfiddle.net/c904atb3/1/