waterfall chart not showing

d12544 commented 5 years ago

var conf1={ chart: { type: 'waterfall', animation: Highcharts.svg, },

  title: {
      text: 'Highcharts Waterfall'
  },

  xAxis: {
      type: 'category'
  },

  yAxis: {
      title: {
          text: 'USD'
      }
  },

  legend: {
      enabled: false
  },

  tooltip: {
      pointFormat: '<b>${point.y:,.2f}</b> USD'
  },

  series: [{
    upColor: 'green',
    color: 'blue',
      data: [{
          name: 'Start',
          y: 120000
      }, {
          name: 'Product Revenue',
          y: 569000
      }, {
          name: 'Service Revenue',
          y: 231000
      }],
      dataLabels: {
          enabled: true,
          formatter: function () {
              return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
          },
          style: {
              fontWeight: 'bold'
          }
      },

          }]
};

return (

);

pavaleanuL commented 5 years ago

Could you please tell me how you solved this issue. Thanks.

d12544 commented 5 years ago

@pavaleanuL

Replace this.state in react-native-highcharts/app/index.js and react-native-highcharts.js with the below code.

this.state={ init:

                <style media="screen" type="text/css">
                #container {
                    width:100%;
                    height:100%;
                    top:0;
                    left:0;
                    right:0;
                    bottom:0;
                    position:absolute;
                    user-select: none;
                    -webkit-user-select: none;
                }
                </style>
                <head>
                     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
                    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
                    <script src="https://code.highcharts.com/highcharts-more.js"></script>
                    <script src = "https://code.highcharts.com/modules/heatmap.js"></script>  
                    <script src = "https://code.highcharts.com/modules/treemap.js"></script> 
                    <script src="https://code.highcharts.com/modules/exporting.js"></script>

                    <script>
                    $(function () {
                        Highcharts.setOptions(${JSON.stringify(this.props.options)});
                        Highcharts.${this.props.stock ? 'stockChart' : 'chart'}('container', `,
        end:`           );
                    });
                    </script>
                </head>
                <body>
                    <div id="container">
                    </div>
                </body>
            </html>`,
        Wlayout:{
            height:win.height,
            width:win.width
        }
    }`

TradingPal / react-native-highcharts

waterfall chart not showing #88