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 ****/