Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Plotly React Bar and Linear Chart


In the linear chart yaxis value is correct
when change to bar chart yaxis value is showing incorrect?

import React, { Component } from ‘react’;

import Plot from ‘react-plotly.js’;

import * as d3 from ‘d3’;

import csv from ‘./data.csv’;

class App extends Component {

constructor(props){

super(props);

this.state ={ data: [] }

}

componentDidMount() {

d3.csv(csv).then(data => {

  this.setState( {data: data} )

})

}

formatDate (sec) {

let _hour = 0 ;

let _minute = 0 ;

let _seconds = 0 ;

_hour = Math.floor(

  (sec % (60 * 60 * 24)) / (60 * 60)

);

_minute = Math.floor(

  (sec % (60 * 60)) / 60

);

_seconds = Math.floor(sec % 60);

_hour = _hour < 10 ? '0'+_hour : _hour;

_minute = _minute < 10 ? '0'+_minute : _minute;

_seconds = _seconds < 10 ? '0'+_seconds : _seconds;



return _hour+":"+_minute+":"+_seconds

}

transformData (data) {

let plot_data = [];

let x = [];

let y = [];

for (var i = 0; i < data.length; i++) {

  let X = data[i].x - data[0].x;

 

  X = this.formatDate(X/1e3)

  x.push(X)

  let Y = data[i].y;  

  y.push(Y)

}  

plot_data['x'] = x;

plot_data['y'] = y;

return plot_data

}

render() {

return (

 

  <div>

      <div id = "myDiv" onClick={('plotly_click', function(data) {

            console.log(data)  

         

            // for(var i=0; i<data.points.length; i++){

            //     let annotate_text = 'x = '+data.points[i].x +' y = '+data.points[i].y;

            //     console.log(annotate_text)

                // let annotation = {

                //     text: annotate_text,

                //     x: data.points[i].x,

                //     y: parseFloat(data.points[i].y)

                // }

                // let annotations = self.layout.annotations || [];

                // annotations.push(annotation);

                // Plotly.relayout('myDiv',{annotations: annotations})

            // }

        })

        }>

      <Plot

        data = {[

            {

              type: 'linear',

              mode: 'lines',

              x: this.transformData(this.state.data)['x'],

              y: this.transformData(this.state.data)['y'],

              line: {color: 'green'},

            },

        ]}                

        layout = { {width: 1250, height: 600, title: 'Read Data', // dragmode: 'pan',

          xaxis: {

            autotick: false,

            // fixedrange: true,

            tick0: 0,

            dtick: 30,

            ticklen: 4,

            tickwidth: 2,

            tickcolor: '#000',

            showgrid: true,

            zeroline: true,

            showline: true,

            gridcolor: '#bdbdbd',

            gridwidth: 1,

            zerolinecolor: '#969696',

            zerolinewidth: 2,

            linecolor: '#636363',

            linewidth: 1

          },

         

          yaxis: {

            autorange: true,

            // range: [600, 900],

            // fixedrange: true,

            tick0: 0,

            ticklen: 4,

            tickwidth: 2,

            tickcolor: '#000',

            showgrid: true,

            zeroline: true,

            showline: true,

            gridcolor: '#bdbdbd',

            gridwidth: 1,

            zerolinecolor: '#969696',

            zerolinewidth: 2,

            linecolor: '#636363',

            linewidth: 1

          },

          updatemenus : [{

            // type : "buttons",

            // direction : 'right',

            y: 680,

            yanchor: 'top',

            buttons: [{

                method: 'restyle',

                args: ['line.color', 'red'],

                label: 'Red'

            }, {

                method: 'restyle',

                args: ['line.color', 'blue'],

                label: 'Blue'

            }, {

                method: 'restyle',

                args: ['line.color', 'green'],

                label: 'Green'

            }, {

                method: 'restyle',

                args: ['line.color', 'orange'],

                label: 'Orange'

            }]

          }, {

            // type : "buttons",

            // direction : 'left',

            yanchor: 'bottom',

            buttons: [{

                method: 'restyle',

                args: ['type', 'linear'],

                label: 'Linear'

            }, {

                method: 'restyle',

                args: ['type', 'bar'],

                label: 'Bar'

            }]

          }],

          showlegend: false,

        } }

        plotly_click={this.onClick}

        config={{scrollZoom:true,  displaylogo: false, responsive: true, editable: true}}

        useResizeHandler={true}

      />

      </div>

  </div>

)

}

}

export default App;

/**** this is complete code ****/