highcharts / export-csv

Highcharts plugin to export chart data to CSV

Highcharts JS is a JavaScript charting library based on SVG and some canvas/WebGL.

• Official website: www.highcharts.com
• Download page: www.highcharts.com/download
• Licensing: shop.highcharts.com
• Support: www.highcharts.com/support
• Issues: Repo guidelines

Highcharts is a source available product. Please refer to shop.highcharts.com for details on licensing.

Installing and using Highcharts

This is the working repo for Highcharts code. If you simply want to include Highcharts into a project, use the distribution package instead, or read the download page.

Please note that there are several ways to use Highcharts. For general installation instructions, see the docs.

Use our CDN

Instead of downloading, you can use our CDN to access files directly. See code.highcharts.com for details.

<script src="https://code.highcharts.com/highcharts.js"></script>

Install from npm

See npm documentation on how to get started with npm.

npm install --save highcharts

ES6 modules, AMD, CommonJS and others

For other ways to use Highcharts in your projects, please refer to our installation docs.

Create your own custom build of Highcharts

To reduce file size, or combine modules into one file to reduce latency, you may want to create your own build of the Highcharts modules. See Creating custom Highcharts files for more information.

Build and debug

If you want to do modifications to Highcharts or fix issues, you may build your own files. Highcharts uses Gulp as the build system. After npm install in the root folder, run gulp, which will set up a watch task for the JavaScript and CSS files. Now any changes in the files of the /js or /css folders will result in new files being built and saved in the code folder. Other tasks are also available, like gulp lint.

npm install
gulp

Node setup for Apple Mx CPU

When running Node natively on ARM64 MacOS, some Node packages like node-canvas with integrated compiling might fail. Install additional tools to resolve the problem:

• Homebrew and run brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

Generate API docs

Run in this highcharts repository the doc generator with npx gulp jsdoc-watch, which also starts a new server with the generated API documentation.

export-csv's Issues

Some x-axis symbols don't appear correctly when viewed in Excel

This is the same issue as listed here: #27

I have some greater-than-or-equal-to symbols on the x-axis of a plot. These don't appear correctly in the csv or xls file. It can be fixed by changing line 195 to:

'data:text/csv;charset=utf-8,%EF%BB%BF' + csv.replace(/\n/g, '%0A'),

Regard,

David

How to use with jspm?

How do I call export CSV methods in a jQuery context? I have jQuery, Highcharts, and this export CSV plugin loaded via jspm. I initialise a chart like so:

var reachChart = $('#reach').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: { text: 'Reach' },
    tooltip: { pointFormat: '{series.name}: <b>{point.y}</b>' },
    plotOptions: {
        // snipped
    },
    series: [{
        // snipped
    }]
});

But calling reachChart.getCSV() results in the following error:

Uncaught (in promise) Error: reachChart.getCSV is not a function(…)

How do I use the methods provided by the plugin in this context?

Support for scatter plots

I don't think this plugin correctly supports scatter plots - as with heat maps it appears to only output a subset of the data.

lineDelimiter instead of lineDelimeter

It seems mistyping in lineDelimiter word
https://github.com/highslide-software/export-csv/blob/master/export-csv.js#L20

export-csv.js - error with column, line and pie graph - Cannot read property '0' of undefined

When I used export-csv.js to export csv or excel file for highChart graph "column, line and pie graph", I was getting javascript error in "Transform the rows to CSV" part in this line "Highcharts.pick(xAxis.names[row.x], xAxis.categories[row.x], row.x)".
This error happened because I do not have xAxis names in my case (xAxis.names was undefined).

I Fixed in locally by adding the below if condition.

                if ( xAxis.names === undefined || xAxis.names === null) {
                    category = Highcharts.pick(xAxis.categories[row.x], row.x)
                } else {
                    category = Highcharts.pick(xAxis.names[row.x], xAxis.categories[row.x], row.x)
                }

Export CSV with X-axis title, that is not DateTime or Category

When using the export-csv plugin, the only possible title for the X-axis is Category or DateTime. How do I change that to use the actual title.

For eg. http://jsfiddle.net/highcharts/cqjvd/
In that chart I would rather have 'Month' as title for the X-axis, but https://github.com/highslide-software/export-csv/blob/master/export-csv.js#L96 makes that the only possibility be of title to be either 'DateTime' or 'Category'. How do I get around that?

CSV export for Pie Chart.

I was needing to export the the data for a pie chart and added ti bit of code to show the data Name and Y value. I thought I would share in case you wanted to add the functionality to your code.

else if (series.options.type == "pie") {
                    xData = series.xData.slice();
                    xData = Highcharts.map(xData, function (x) {
                        return Highcharts.pick(series.data[x].name, x);
                    });
                    xTitle = 'Category';

                    columns.push(xData);
                    columns[columns.length - 1].unshift(xTitle);
                }

npm package?

Is there an npm package for this?

export all the data of all the columns (when different length)

e.g.
changing

 // Transform the columns to CSV
for (row = 0; row < columns[0].length; row++) {

To:

 // Transform the columns to CSV
for (row = 0; row < Math.max.apply(Math, $.map(columns, function (el) { return el.length })); row++) {

but this is using Jquery...

Map bubble - incorrect format

Seems that map bubble are not exported properly.

Example: http://jsfiddle.net/h7trnc5f/1/

Export-csv not working

Export-csv does not appear to be working. Tried in several different browsers. Also, in jsfiddle: http://jsfiddle.net/highcharts/cqjvD/ demo the option is not appearing in the drop-down menu.

I had this working fine in my code before, not sure what changed.

XLS export

Two things:

1. It would be nice to add an option to enable/disable both csv and xls exporting individually via something like:

exporting: {
  enabled: true,
  csv: {
    itemDelimiter: ',',
    xlsEnabled: false
  }
},

2. The XLS exporting doesn't appear to be working correctly for me. I can't seem to view the generated output it in Numbers or upload to Google Drive for viewing:

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Ark1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><style>td{border:none;font-family: Calibri, sans-serif;} .number{mso-number-format:"0.00";}</style><meta name=ProgId content=Excel.Sheet></head><body><table><tr><th>Category</th><th>Percentage of users</th></tr><tr><td>Yes, I am safe</td><td class="number">1</td></tr><tr><td>No, I am not safe</td><td class="number">0</td></tr><tr><td>Unreceived</td><td class="number">4</td></tr></table></body></html>

Running the above through an XML validator I'm notified that it's not valid XML.

Thoughts?

Regression: Not exporting all series in the chart data

v1.3.4 from the gh-pages branch no longer exports all series in the csv or xls file. This problem was not present in v1.3.3. I believe the regression was introduced in commit 3c675a4.

Example: http://jsfiddle.net/cqjvD/836/

When running the example, the series labels from all chart series are exported but only the data for the first and last series is exported.

Export to csv - different order

It seems that categories are mixed with series.

Example: http://jsfiddle.net/cqjvD/448/

As a result we should receive

Data replacement causes errors in export

I have an application where I need to reset the data in the chart, I have 1 series that is rendered and an unknown number of dynamically generated series, which I export. When I replace the data (by removing the old sets and adding the new sets), the export generates this error:

Uncaught TypeError: Array.prototype.forEach called on null or undefined
S.HighchartsAdapter.S.HighchartsAdapter.a.init.each.Array.forEach.g @ highstock.js:23
(anonymous function) @ export-csv.js:38
S.HighchartsAdapter.S.HighchartsAdapter.a.init.each.Array.forEach.g @ highstock.js:23
Highcharts.Chart.getDataRows @ export-csv.js:35
Highcharts.Chart.getCSV @ export-csv.js:85
H.Chart.exportChartLocal @ highcharts-export-clientside.js:241
handlerBuilder @ highcharts-export-clientside.js:115p.contextMenu.a.separator.l.onclick @ exporting.js:18

I've checked that all the series have data, and that they are populating correctly and that is the case. After that I'm not exactly sure what the best way to fix/circumvent this issue is.

Thanks!

Add filename option

Please add an exporting.csv.filename option, so that, if configured, the filename is not automatically constructed from the chart title.

DateFormat chart option can be a variable or function

for globalization support chart.exporting.csv.dateFormat should be either a variable or a function, therefore, custom dateFormat may be provided for parsing dates using function.
In this regard following code changes are requested.
if (series.xAxis.isDatetimeAxis) {
xData = Highcharts.map(xData, function (x) {
if (typeof dateFormat == 'function') {
return dateFormat(x);
} else {
return Highcharts.dateFormat(dateFormat, x)
}
});
xTitle = 'DateTime';
}

Accentuated characters (lacking UFT-8 BOM)

Accentuated characters not being exported correctly because the CSV is being written in UTF-8 without BOM. Without it, Excel miss-interprets these characters below: À Á Ã Â É Í Ó Õ Ú Ç à á â ã é í ó õ ú ç

The fix - Change the file creation to:
a.href = 'data:text/csv;charset=utf-8,%EF%BB%BF,' ...

Keep up the good work

Navigator name not exported

Is in the topic.

Example: http://jsfiddle.net/cqjvD/348/

Incorrect XLS file format ?

When exporting in XLS, I'm having a prompt when opening the file stating that the format is different from the specified extension:

Excel version is 2007.

npm package?

Is there an npm package for this?

to have only one dateTime for all point.y

chart print the date according to data in the series instead displaying it with one x axis and multiple y series. is it possible?

this one similar to this case #12

Exporting XLS Not working in IE9

Hello,

Downloading XLS from the burger menu beside a HighChart does not appear to work in IE9.

To replicate, in IE9, go to http://www.highcharts.com/plugin-registry/single/7/Export-CSV-XLS , click the burger menu within the High Chart and select 'Download XLS'. Nothing loads/shows up for download.

Regards,
Dave

to export data based on data grouping for Highstock

I think this feature should be explore

Fix handling of special characters in series names

My chart has a trademark (TM) character in series names. It does not carry over well into column names of exported CSV.

Incorrect separator in CSV file?

Just started using the plugin and works nicely. However the CSV output is not separated using commas but semicolons. Any reason for that?

Strip away undefined points in series

We are trying to export data displayed in Highcharts as an Excel spreadsheet using export-csv.js library. A problem arises when your series is not displayed in its entirety on the chart. In that scenario, the resulting excel will display 'undefined' as values for the data on y-axis, because it was not shown on the active chart area.

As far as my colleagues and I understand the inner workings of Highcharts, the functionality where datapoints in series outside of the active chart area are undefined could be considered core and really hard to change. Therefore, would it be possible to instead strip away the undefined datarows from the resulting excel?

Export To CSV with spacing

How can I export the cells with space in the words ?.

Issue with using it as an npm module

I tried to use it as a client side dependency pulled in via npm. Since I can not find it in npm registry, I put this in my package.json:
"export-csv": "git://github.com/highslide-software/export-csv.git",
when I do npm install, it give me this error:
npm ERR! addLocal Could not install /var/folders/17/753bdfvj71jc_7w4s1lp2b7c0000gy/T/npm-3336-fb0db841/git-cache-90a11606310f/a91b014fb5f87d6c7ab64171d413e912cb92bde3
npm ERR! Darwin 14.5.0

I can pull in highcharts just fine by
"highcharts": "git://github.com/highslide-software/highcharts-release.git#v4.1.9",

How do I know which name to use? "export-csv" or "export-csv-plugin" or something else?
Also is there a browserify version of this plugin (CommonJS compatible)?

yAxis categories

Example: http://jsfiddle.net/84fxqx0o/

Exports data as:

While instead of y-values, categories on yAxis would be expected.

Export csv option disappeared

There used to be an option for downloading csv, but now it's gone.
I noticed same issue on the plugin home page and demo page also.

it's wired when export data with flags

it's wired when export data with flags

http://jsfiddle.net/TKXEm/1/

Unable to download CSV in Microsoft Edge

When I was exporting csv under Microsft Edge browser in export-csv example page (http://jsfiddle.net/highcharts/cqjvD/), the browser crashed and not able to download CSV file.

Undefined is not a function

Hi there -

The JS Fiddles you've got online as well as my attempt to use this plugin result in an "Undefined is not a function" error.

What could be the cause?

Force Excel to properly read UTF-8 characters

Hi,

By default Excel works with local character encoding, not utf-8 (for example windows-1250). But there seems to be a way to force it to use unicode. Simply add an extra meta tag in output HTML:

               '<meta name=ProgId content=Excel.Sheet>' +
                '<meta charset=utf-8>' +
                '</head><body>' +

Remove data grouping in highstock export module

Hi,

Is there anyway to remove the data-grouping in highstock chart export module? I have around 30k records and while exporting as CSV or XLS, only 554 data is obtained. I understand its getting grouped as average or so. But is there a way to completely remove the data grouping while downloading? If it does not exist, can this be added in future?

does not support heatmap

This current functionality does not support the heatmap graph that highcharts now has. It will only return the last data set, basically ignoring the y-axis.

Add git tags for release versions in Bower

Bower requires git tags to retrieve the version numbers. Please add a git tag for the latest version 1.3.6 in the repository and any future release versions.

http://bower.io/docs/creating-packages/#register

• Your package should use semver Git tags. The v prefix is allowed.
• Your package must be publically available at a Git endpoint (e.g., GitHub). Remember to push your Git tags!

Plugin does not support full language options

Hello!

This is a nice plugin, thanks for that.

I have a little problem with it, because it does not support global language options for decimal/thousands separators.

Perhaps, this could be not as easy as it seems... because HighCharts uses decimal/thousands separators from language options only on legends (data must use '.' as decimal separator).

Could you get data from graphs after getting language options? This way, maybe it would be possible to format them.

In my case (in Spain), I use ',' as decimal separator and '.' for thousands. Microsoft Excel gets regional options from Windows, so uses the same config for separators. So... when MS Excel reads "3.02" in a cell, it won't apply number format to that cell (although CSV format does not contain any format info, Excel will represent it by default).

Thanks!

Overriding language strings requires very specific configuration

Hi,

The way that export-csv loads i18n strings requires very specific order of loading scripts:

1. highcharts.js
2. highcharts-export.js
3. setting Highcharts.setOptions({lang: ...})
4. export-csv.js

I had to heavily modify our app, because it loaded all the scripts on the beginning and then set language strings before rendering the chart. But export-csv tries earlier to replace "downloadCSV" and "downloadXLS", which are obviously undefined at this time.

X-axis labels not included in csv or xls if multiple series or drilldown plot is being exported

Hi there. Thanks for putting this together - it's really useful. I am working on a project that uses Highcharts plots that include more than one series, and also include drilldown series. Unfortunately when the data from either of these plot types is exported to csv or xls the x-category data is missing, and is replaced with integers. See http://jsfiddle.net/9phfzewj/19/ for an example.

Do you have any suggestions as to how I could fix this?

Regards,

David

Export to csv or xls when an area is given not exporting area data for all range values

var chart = new Highcharts.Chart({
               chart: {
                   renderTo: 'container',
                   zoomType: 'xy' 
              },
            title: {
                text: metricId
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                   align: 'high',
                    offset: 0,
                    text: '%',
                    rotation: 0,
                    y: 6
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: '%'
            },

             legend: {
                layout: 'horizontal',
                align: 'left',
                x: 50,
                verticalAlign: 'top',
                y: 20,
                floating: true ,
                itemStyle: {
                 "color": "#333333", 
                 "cursor": "pointer", 
                 "fontSize": "10px", 
                 "fontWeight": "regular" 
                }
            },
            series: [{
                name: 'CPU Utilization',
                data: averages,
                zIndex: 1,
                marker: {
                    fillColor: 'white',
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[0]
                }
            }, {
                name: 'Band',
                data: ranges,
                type: 'arearange',
                lineWidth: 0,
                linkedTo: ':previous',
                color: Highcharts.getOptions().colors[0],
                fillOpacity: 0.3,
                zIndex: 0
            }]
        });

getCSV breaks when used in conjunction with Visible:false

Hello,
The getCSV function breaks if series is set to visible:false.

Visible-false:
http://jsfiddle.net/tt41v3sj/1/

visible- true:
http://jsfiddle.net/esccwu2a/

I'm using this to export data that isn't showing, but that appears to be desired behavior, is there an alternative whereby I can export categorical heatmaps as csv?

Series' names are ignored when xAxis is enabled

Hi,

I'm exporting data from spider-line chart, where categories are defined as series' names. It's much easier that way, because I don't have to define categories separately.

Unfortunately export-csv assumes that when xAxis is enabled then you must assign categories to it. I have simply commented out if (!series.xAxis), but it's safe only in my case. There should be more checking when parsing the series, not at the end when categories are added.

Export breaks on UTF-8 characters

Hi,

Exporting data with UTF-8 characters breaks (at least in Firefox), because window.btoa() works only with ISO-8859-1 characters. The fix that works for me is to replace:

return window.btoa(decodeURIComponent(encodeURIComponent(s)));

with (they both seem to work, I'm not sure which is better):

return window.btoa(unescape(encodeURIComponent(s)));
return window.btoa(decodeURIComponent(unescape(encodeURIComponent(s))));

Current code puts data into the dataset

As I documented here...
http://forum.highcharts.com/highstock-usage/export-csv-plugin-t28117/#p98438
line 25 of export-csv.js actually puts this data back into yData array due to the yData array being added to columns by reference.

Sometimes this breaks the chart, and all the time it results in erroneous csv data on multiple export attempts....

ie
First Export:
'thing1'
...
Second Export:
'thing1'
'thing1'
...

etc.

The fix for this is to pass in a deep copy of the array to columns in line 24 (see the above link)

[enhancement] Add missing bower.json.

Hey, maintainer(s) of highslide-software/export-csv!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library highslide-software/export-csv is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "highslide-software/export-csv",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

to export csv according to displayed graph

when export to csv, chart will print all available data in the series instead print only data shown on the graph based on the range selector selected or when user zoom in

Wrong scatter export - 2 points with the same date

Example: http://jsfiddle.net/cqjvD/789/

Modify filename

The default allows for changing the filename that is saved. Does this one offer it as well?

http://api.highcharts.com/highcharts#exporting.filename