search

kirjs / react-highcharts

React wrapper for Highcharts library
http://kirjs.github.io/react-highcharts/
MIT License
1.26k stars 233 forks source link

chart.getCSV() is not a function #355

Closed AakashRaina closed 6 years ago

AakashRaina commented 6 years ago

I have loaded the exporting module and it works properly. I'm able to export to pdf, svg etc.. but can't export to csv

console codeshot

ilyjs commented 6 years ago

You need:

npm install highcharts-export-csv

It works for me:

import React, { Component } from 'react'

import Highcharts from "highcharts";
import ReactHighcharts from 'react-highcharts'

const HighchartsExporting = require('highcharts-exporting')
HighchartsExporting(ReactHighcharts.Highcharts)

require('highcharts-export-csv')(ReactHighcharts.Highcharts)

class superChart extends Component {

    componentDidMount(){
        let chart = this.refs.chart.getChart();
        console.log(chart.getCSV())
    }

    render() {
        let config = {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'USD to EUR exchange rate over time'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Exchange rate'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'Us',
                data: [[Date.UTC(2013,5,3),0.7648],
                    [Date.UTC(2013,5,4),0.7645],
                    [Date.UTC(2013,5,5),0.7638],
                    [Date.UTC(2013,5,6),0.7549],
                    [Date.UTC(2013,5,7),0.7562],
                    [Date.UTC(2013,5,9),0.7574],
                    [Date.UTC(2013,5,10),0.7543],
                    [Date.UTC(2013,5,11),0.7510],
                    [Date.UTC(2013,5,12),0.7498],
                    [Date.UTC(2013,5,13),0.7477],
                    [Date.UTC(2013,5,14),0.7492],
                    [Date.UTC(2013,5,16),0.7487],
                    [Date.UTC(2013,5,17),0.7480],
                    [Date.UTC(2013,5,18),0.7466],
                    [Date.UTC(2013,5,19),0.7521],
                    [Date.UTC(2013,5,20),0.7564],
                    [Date.UTC(2013,5,21),0.7621],
                    [Date.UTC(2013,5,23),0.7630],
                    [Date.UTC(2013,5,24),0.7623],
                    [Date.UTC(2013,5,25),0.7644],
                    [Date.UTC(2013,5,26),0.7685],
                    [Date.UTC(2013,5,27),0.7671],
                    [Date.UTC(2013,5,28),0.7687],
                    [Date.UTC(2013,5,30),0.7687],
                    [Date.UTC(2013,6,1),0.7654],
                    [Date.UTC(2013,6,2),0.7705],
                    [Date.UTC(2013,6,3),0.7687],
                    [Date.UTC(2013,6,4),0.7744],
                    [Date.UTC(2013,6,5),0.7793],
                    [Date.UTC(2013,6,7),0.7804],
                    [Date.UTC(2013,6,8),0.7770],
                    [Date.UTC(2013,6,9),0.7824],
                    [Date.UTC(2013,6,10),0.7705],
                    [Date.UTC(2013,6,11),0.7635],
                    [Date.UTC(2013,6,12),0.7652],
                    [Date.UTC(2013,6,14),0.7656],
                    [Date.UTC(2013,6,15),0.7655],
                    [Date.UTC(2013,6,16),0.7598],
                    [Date.UTC(2013,6,17),0.7619],
                    [Date.UTC(2013,6,18),0.7628],
                ]
            }]
        }

        return(
            <div id='main' style={{padding:20,}}>

                <ReactHighcharts  config={config} ref="chart"> </ReactHighcharts>
            </div>
        )

    }

}

export default superChart
AakashRaina commented 6 years ago

Thanks, worked like a charm :)