TradingPal / react-native-highcharts

📈 Add Highcharts charts to react-native app for IOS and Android
https://github.com/TradingPal/react-native-highcharts
256 stars 158 forks source link

Column events not firing #51

Closed mobitinker closed 6 years ago

mobitinker commented 6 years ago

Thanks for your work on this. Very helpful!

In the code below I can't get the console.log events to fire.

` // Configure the HighCharts chart barChart (title) {

// Populate data for bars, color as indicated
let data = new Array()
var i, c
for (i=0; i<24; i++) {
  var r = Math.random()
  var val = 8 + (r * 2)
  if (val > 9.4) {
    c = '#4283BE' // Good
  } else if (val > 9.0) {
    c = '#FDA555' // Ok
  } else {
    c = '#F80207' // Bad
  }
  data.push({y: val, color: c})
}

var categories = [
    '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
    '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '23'
]

// Required line if using Highcharts methods below
//let Highcharts='Highcharts';

let conf={
    chart: {
        type: 'column',
        backgroundColor: '#000000'
    },
    title: {
      text: title,
      style: {
        color: Colors.snow
      }
    },
    exporting: {
      buttons: {
          contextButton: {
            enabled: false
          }
      }
    },

    credits: false,

    xAxis: {
        categories: categories,
        labels: {
          style: {
            color: '#FFFFFF'
          }
        }
    },
    yAxis: {
        min: 0,
        max: 10,
        visible: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
        },
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: (o) => {
                console.log(o)
                console.log("It's alive!")
              }
            }
          }

        }
    },

    series: [
      {
        name: title,
        data: data,
        showInLegend: false,
        style: {
          color: '#ffffff'
        },
        pointWidth: 12,
      }
    ]
};

return (
  <ChartView style={{flex:1}} config={conf}></ChartView>
);

} `

luisfmsouza commented 6 years ago

Are you expecting the console.log in the react native debugger @mobitinker?

If yes, it shouldn't work, because the whole config is passed to the WebView context. So, your console should be fired there.

I've faced the same problem today :/

mobitinker commented 6 years ago

Oh gosh, that's it. If I use 'alert()' instead I see the event fire.

Now I just need figure how to bubble that event out to react-native.

mobitinker commented 6 years ago

Closed since it was not an issue with this component.

cstpraveen commented 6 years ago

How did you solve this problem.