Highcharts scatter chart legend toggle running slow - javascript

I'm working on a scatter chart with highcharts. The chart renders just fine, but when I click on the legend to toggle any one of the series, the whole chart becomes very slow. It works on chrome (takes a good 15 seconds to load), but on safari, it times out. If I switch my 'type' to line, the legend toggle becomes nice and swift again. So, is there something about the highcharts scatter chart that I need to look into? FYI I also tried the booster on the highcharts API, but it doesn't work for me.
This is the code I use in the legend:
legend: {
width: 0,
enabled: true,
itemStyle: {
'cursor': 'pointer'
}
}
Here is my fiddle.

Disabling animations made it toggle quickly for me.
options.chart.animation = false;

Related

How to remove the white outline/border on Highcharts 3D on setData?

I am loading a column chart in 3D with Highcharts. On the inital load, the chart works perfectly. When I use setData() to change the series, the chart gains an odd white outline around its edges.
Before:
After:
I tried a few fixes such as using edgeColor and edgeWidth, although they made no difference.
Note: If I hover over one of the columns, the outline is instantly removed on that particular item until setData() occurs again.
How can I remove this white outline from the chart?
edgeWidth should be working, however there is a bug. Reported here - thanks.
As workaround, set edgeColor: 'rgba(0,0,0,0). Demo: jsfiddle.net/hdghyz2x
Bug is fixed already by commit (4c94d34) - will be included in next release (4.1.5). Available already in github version: http://github.highcharts.com/highcharts-3d.js
like this
$('#container').highcharts({
chart: {
type: 'bar',
},
title: {
text: 'Pie without borders'
},
series: [{
borderWidth: 0,
}]
});
});

How to show BAr graph rather than line graph in High Stoch Chart

I am trying to use High Stock Chart but rather than showing a line graph in it I want to show bar graph is there a possibility to do same
JS Fiddle
My end requirement is to make a graph like this
Will it involve some additional CSS
I need to show time slider at bottom as mentioned in screenshot
On Change of time interval on slider my graph will change
Please suggest on same.
After playing around with the chart I found the following solution which can be seen in the demo below:
$('#container').highcharts('StockChart', {
chart: {
type: 'column'
},
rangeSelector: {
allButtonsEnabled: true,
selected: 2
},
JSFIDDLE DEMO
The formatting is not the same as your end result but you should be able to play with the styling and ranges to make it work.

Highcharts Pie chart datalabels cut off/ positioning

I'm attempting to use a highcharts in conjunction with Bootstrap. The pie chart is placed inside a column of 6 for example, so it takes up half the page. What has been happening is the datalabels are too long and so are being cropped out of the containing div.
A fix that has been proposed for this is to set a width on the datalabels.
like so:
pie: {
size: '60%',
allowPointSelect: true,
dataLabels: {
style:{
width:100
color:'black'
}
}
}
}
This works flawlessly for Chrome and mozilla, the width is set and the position of the datalabel changes so its all drawn closer to the pie chart. But when testing in IE8, (and I have to account for it unfortunately) the width is set, but it appears that the position of the datalabel is not changing, so I get even less of the data label visible on the screen.
I'll try get a jsfiddle or a screenshot up shortly so you can see what I mean, but initially I was just seeing if anyone had come across this issue before, or if there's a simple fix I am just missing.
Jsfiddle
I've commented out the width in the plot options so you can see what's happening.
When I uncomment the width, it renders perfectly in Chrome and mozilla. But in IE8, the position of the label doesn't change, so the left labels end up far away from the pie chart and still cropped.

Cannot set Individual Point color in Series for Highstock API, it works for Highchart API

I am working on Highstock, I am trying to set a color to a specific point in "data" in Highstock, like in the example, its using Highchart API,but I couldn't get it to work with Highstock API, no matter how I set the color, it doesn't show on the graph.
Can someone please help?
Here is what I have tried so far
Highstock has point markers disabled by default, you will need to enable them explicitly as follows,
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
API Reference: http://api.highcharts.com/highstock#point.marker.enabled
Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/plotoptions/series-marker/
jsFiddle for your code: http://jsfiddle.net/jugal/nrRDg/

Formatting legend and axis in Google Charts

I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt

Categories

Resources