Comments (4)
Can you post your code?
from react-charts.
App.js
:
import logo from './logo.svg';
import './App.css';
// import * as reactCharts from 'react-charts'
// console.log('react charts:', reactCharts ? reactCharts : 'nothing');
import Line from './Line'
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Line />
</div>
);
}
}
export default App;
Line.js
:
import _ from 'lodash'
import { ResizableBox } from 'react-resizable'
//
import { Chart, Axis, Series, Tooltip } from 'react-charts'
//
// import CodeHighlight from './components/codeHighlight.js'
class Line extends Component {
constructor () {
super()
this.state = {
data: makeData()
}
}
render () {
const {
data
} = this.state
return (
<div>
<button
onClick={() => this.setState({
data: makeData()
})}
>
Randomize Data
</button>
<br />
<br />
{_.range(1).map((d, i) => (
<ResizableBox
key={i}
width={500}
height={300}
>
<Chart
data={data}
>
<Axis
primary
type='time'
position='bottom'
/>
<Axis
type='linear'
position='left'
/>
<Series
type='line'
/>
<Tooltip />
</Chart>
</ResizableBox>
))}
<br />
<br />
</div>
)
}
}
export default () => <Line />
function makeData () {
return _.map(_.range(Math.max(Math.round((Math.random() * 4)), 1)), d => makeSeries())
}
function makeSeries () {
const startDate = new Date()
// const length = Math.round(Math.random() * 30)
const length = 30
const max = 100
// const max = Math.random() > 0.5 ? 100000 : 10
// const multiplier = 10
// const multiplier = Math.round((Math.random() * 10) + Math.round(Math.random() * 50))
return _.map(_.range(length), d => ({
// x: d * multiplier,
x: new Date().setMinutes(startDate.getMinutes() + (30 * d)),
y: Math.round(Math.random() * (max) + Math.round(Math.random() * 50)),
r: Math.round(Math.random() * 5)
}))
}
from react-charts.
I am getting the same issue. Also using the Line.js example.
from react-charts.
This should be fixed now.
from react-charts.
Related Issues (20)
- Constant secondary axis doesn't show bars HOT 1
- Data is not correctly displayed when stacked HOT 1
- Tooltip issue HOT 8
- Label for axis HOT 1
- [Important] d3-color Vulnerability issue. d3-scale dependency update required HOT 1
- MultipleAxes Issue HOT 1
- TypeError: Cannot read properties of undefined (reading 'Chart') HOT 1
- Vertical bar not showing in Bar - 3.0.0-beta.55 HOT 2
- Still supported? HOT 3
- Error: require() of ES Module [...] `buildAxis.linear.js` not supported. HOT 6
- `bar` element type doesn't show properly when axis value is a date HOT 1
- candlestick?
- Anyway to set the maxValue for x axis in the Horizontal Bar chart ?
- Unable to change font size, other styles
- How to style primaryCursor and SecondryCursor lines
- Update Copywrite year
- Multiple Axes
- Vue support?
- How to add 0 in bar chart? HOT 1
- Can't see text in tooltip with dark: true HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-charts.