Did you know you don't need much to build an animated bar chart?
In this article, I will try to explain how to get such an effect with React. 📊
Before we start, I would highly recommend you to check out runnable example for the solution on our website:
Create simple animated bar chart in React
Final effect of the post:
The main idea is to create individual bars that are described from 0 to 100%. The bars are arranged sequentially next to each other in a chart, using an example data set
based on the cosine function.
Each change of the dataset describing the chart causes a smooth re-rendering (this happens due to a simple style called transition).
The whole effect is achieved with a few lines, most of the effect is actually styles. 🎨
Practical example:
import React from 'react'; import ReactDOM from 'react-dom'; // --------------------------------- const containerStyle = { padding: '0 1px', background: '#ffffff', flex: '1' }; const spaceStyle = { background: '#ffffff', transition: '0.3s' }; const barStyle = { background: '#00cc00', transition: '0.3s' }; const Bar = ({value}) => { return ( <div style={containerStyle}> <div style={{...spaceStyle, height: `${100 - value}%`}} /> <div style={{...barStyle, height: `${value}%`}} /> </div> ); }; const chartStyle = { width: '400px', height: '300px', display: 'flex', overflow: 'hidden' }; const Chart = ({data}) => { return ( <div style={chartStyle}> {data.map((value, index) => <Bar key={index} value={value} />)} </div> ); }; // --------------------------------- const calculateData = (xOffset) => { const data = [ ]; for (var x = 0; x < 3.1415; x += 0.1) { const y = Math.cos(x + xOffset) + 1; data.push(50 * y); } return data; }; const App = () => { const [data, setData] = React.useState(() => calculateData(0)); const xOffsets = [0, 0.7853, 1.5707, 2.3559, 3.1415]; return ( <div> <Chart data={data} /> <br /> <div> <span>xOffset: </span> {xOffsets.map(xOffset => { const handleClick = () => setData(calculateData(xOffset)); return ( <button key={xOffset} onClick={handleClick}>{xOffset}</button> ); })} </div> </div> ); }; export default App; You can run this example here
What do you think about such a chart? Do you think it would be possible to construct a simple library for different types of charts?
Let me know in the comments! 😊
Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions
Top comments (1)
Nice