score:2
Even if the file is local data must travel to the browser, since the chart is drawn there, here is an example with 52k points and the chart is loaded pretty fast.
See http://highcharts.com/stock/demo/data-grouping
If in your case you have too many points maybe you should take some mechanism to divide on representative samples, as it has no sense to show a chart where the eye can not distinguish between the different values.
score:7
Highcharts just released a boost module that helps speed up charts with large amounts of data points. You need a modern browser to use this.
https://github.com/highslide-software/highcharts.com/blob/master/js/modules/boost.src.js
This is my highcharts options when I want to speed up rendering. It removes all animation, click events and tooltips.
Highcharts.setOptions({
plotOptions: {
area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
},
chart: {
reflow: false,
events: {
redraw: function() {
console.log("highcharts redraw, rendering-done");
$('body').addClass('rendering-done');
}
},
animation: false
},
tooltip: {
enabled: false,
animation: false
},
exporting: {
enabled:false
},
credits: {
enabled: false
}
});
Source: stackoverflow.com
Related Query
- How do you increase the performance of highcharts chart creation and rendering
- How do you add text to the bottom center of legend and bottom center of chart under legend?
- How could you supply multiple series to a line chart in R shiny using highcharter package and without hardcoding the series?
- canvg and highcharts how to include chart legend and keep the chart size?
- How to remove default Hover text and display the custom text title on hover Donut chart Highcharts
- How can you align the left and right Y-axes of vertically stacked HighCharts charts?
- How do you reduce the space between pie chart and legend? (highcharts.js)
- How to increase and decrease the height of the gridlines in advanced accessible highcharts
- How to Increase minimum point value and the color of series in advanced accessible charts in Highcharts by making it traverse
- how can I use rangeselector and navigation in highcharts in the given code
- How do you remove the partialFill from Highcharts xrange chart
- How can I maintain the Highcharts halo effect on pie chart after click and mouseOut?
- How to display legend in Highcharts Waterfall Chart and make the sum column of waterfall appear in multiple colors?
- How to draw a chart from one array of data and make labels on the chart from another array of data? Highcharts v.4.0.4
- Highcharts : How to align column chart and bubble chart vertically in the same series
- How to create a column range chart in Highcharts using range and navigator functions?
- How do you change the colour of each category within a highcharts column chart?
- 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 do you increase the height of the x-axis labels area on a highchart.js chart?
- Using Highcharts and displaying a message over or on the chart when there is no data
- How to add space between chart and axis in highcharts
- Highcharts Bar Chart - How to set the minimum bar width/length
- Highcharts - How can I remove starting and ending padding from area chart
- How to Check and Uncheck all the Legend elements in HighCharts Linechart?
- How do I reduce the space between title and chart of a High Chart?
- Highcharts - Bar - Setting the X axis width and the chart area width to be constant
- Highcharts 3.0, area chart with stacked and unstacked series - how to fix?
- How to use add series and update methods in the high chart wrapper for angular?
- Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
More Query from same tag
- How to fix Highchart Sparkline tooltip not showing
- How do I set the margin to bottom of a chart in HighCharts to zero?
- How to fetch data only from hovered series when using multiple series highchart?
- Show customized Mouse over on a bubble chart in Highchart JS
- Highcharts legend is overlapping on to the graph area
- How to define name and value for x axis points in Highchart
- How to get object value inside an array
- Highcharts - How to remove tooltip arrows
- R Highcharter Sankey nodes column property trouble
- Highcharts pie chart hide zero sector
- Possible to set dataLabels to display xAxis data instead of yAxis data in HighCharts?
- Highcharts - how to export chart with different scale in one click
- Highchart - Column chart not coming proper in export api as image
- How to make highcharts display date in hh:mm:ss format, not as timestamp?
- how to control orders of charts in highcharts combination charts?
- highchart column comparison chart like xrange
- Highstock chart offsets dates for no reason
- Using Highcharts with mysql for Page Visits
- Highcharts tooltipRefresh check for hovered item
- How to save highchart image in to particular location in my local
- Highchart dynamic creation - not rendering properly
- Using redux data in JS object
- Highchart org chart type error with ionic application
- How to access y - data in stack column after one of the legend is pressed/removed?
- Multiple series in highstocks
- How can I hide/show a data that in a series? (highchart)
- Highchart: Stacked Column replacement for setExtremes(min, max)
- create a sticky tooltip for a point or a permanent label using HighCharts
- Highcharts: how to change the yAxis title programatically?
- How to show 0 value infomation in treemap highcharts