<a href="/blog/how-to-display-draft-js-content-as-html/">Earlier I wrote</a> about Draft.js and how to display editor content as HTML. Most often just showing the current editor content as HTML is not sufficient and we need to store the editor content somewhere for example to a database. The HTML representation of the editor content can of course be stored to a database, but that is not the best option.
I just published a class where I teach more about Draft.js. Best part is that you can get it for free! <a href="/blog/rich-text-editing-in-react-with-draft-js-course/">Read more</a>.
Draft.js comes with convertToRaw method that takes in a ContentState object and returns the given ContentState as a raw javascript object. This object can then be stored to a database or wherever you need to store your application’s data.
Then when we need to load the data from the database, we get the raw javascript object and we make use of another method provided by Draft.js, convertFromRaw. This method takes in a raw javascript object and returns corresponding ContentState object. You can then use this ContentState object to populate your Draft.js editor with your content.
<img src="./images/IMG_6950-1024x493.jpg" alt="Saving and loading Draft.js content">
Let’s see an example:
<pre><code class="language-jsx">import React from "react";
import {
 Editor,
 EditorState,
 RichUtils,
 convertToRaw,
 convertFromRaw,
} from "draft-js";

class DraftEditorRawExample extends React.Component {
 constructor(props) {
 super(props);
 this.state = { editorState: EditorState.createEmpty() };
 this.onChange = (editorState) => {
 // Convert to raw js object
 const raw = convertToRaw(editorState.getCurrentContent());
 // Save raw js object to local storage
 this.saveEditorContent(raw);

 this.setState({ editorState });
 };
 }

 componentDidMount() {
 // Load editor data (raw js object) from local storage
 const rawEditorData = this.getSavedEditorData();
 if (rawEditorData !== null) {
 const contentState = convertFromRaw(rawEditorData);
 this.setState({
 editorState: EditorState.createWithContent(contentState),
 });
 }
 }

 saveEditorContent(data) {
 localStorage.setItem("editorData", JSON.stringify(data));
 }

 getSavedEditorData() {
 const savedData = localStorage.getItem("editorData");

 return savedData ? JSON.parse(savedData) : null;
 }

 handleKeyCommand(command) {
 const { editorState } = this.state;
 const newState = RichUtils.handleKeyCommand(editorState, command);
 if (newState) {
 this.onChange(newState);
 return true;
 }
 return false;
 }

 renderContentAsRawJs() {
 const contentState = this.state.editorState.getCurrentContent();
 const raw = convertToRaw(contentState);

 return JSON.stringify(raw, null, 2);
 }

 render() {
 return (
 &#x3C;div>
 &#x3C;h4>Draft js editor&#x3C;/h4>
 &#x3C;div className="editor-container">
 &#x3C;Editor
 handleKeyCommand={this.handleKeyCommand.bind(this)}
 editorState={this.state.editorState}
 onChange={this.onChange}
 />
 &#x3C;/div>
 &#x3C;h4>Editor content as raw JS&#x3C;/h4>
 &#x3C;pre>{this.renderContentAsRawJs()}&#x3C;/pre>
 &#x3C;/div>
 );
 }
}

export default DraftEditorRawExample;
</code></pre>
Here is a working demo: <a href="https://github.com/tumetus/draft-js-to-raw">https://github.com/tumetus/draft-js-to-raw</a>
In the example the component has a Draft.js editor and a pre-element that displays the editor content as raw javascript. It also saves the editor’s content to local storage so that when you refresh the page, the editor is populated with the saved data.
Saving and loading makes use of the convertToRaw and convertFromRaw methods mentioned earlier. So in this example you could also save the data for example to a server, instead of just saving it to local storage. For convenience reasons I made this example to save the data to local storage.
So as we see saving and loading Draft.js editor content is pretty straight forward in the end. If you have any questions or comments feel free to leave your comment below.

[Earlier I wrote](/blog/how-to-display-draft-js-content-as-html/) about Draft.js and how to display editor content as HTML. Most often just showing the current editor content as HTML is not sufficient and we need to store the editor content somewhere for example to a database. The HTML representation of the editor content can of course be stored to a database, but that is not the best option.

_I just published a class where I teach more about Draft.js. Best part is that you can get it for free! [Read more](/blog/rich-text-editing-in-react-with-draft-js-course/)._

Draft.js comes with _convertToRaw_ method that takes in a ContentState object and returns the given ContentState as a raw javascript object. This object can then be stored to a database or wherever you need to store your application’s data.

Then when we need to load the data from the database, we get the raw javascript object and we make use of another method provided by Draft.js, _convertFromRaw_. This method takes in a raw javascript object and returns corresponding ContentState object. You can then use this ContentState object to populate your Draft.js editor with your content.

![Saving and loading Draft.js content](/blog-posts/how-to-store-draft-js-content/images/IMG_6950-1024x493.jpg)

Let’s see an example:

```jsx
import React from "react";
import {
 Editor,
 EditorState,
 RichUtils,
 convertToRaw,
 convertFromRaw,
} from "draft-js";

class DraftEditorRawExample extends React.Component {
 constructor(props) {
 super(props);
 this.state = { editorState: EditorState.createEmpty() };
 this.onChange = (editorState) => {
 // Convert to raw js object
 const raw = convertToRaw(editorState.getCurrentContent());
 // Save raw js object to local storage
 this.saveEditorContent(raw);

 this.setState({ editorState });
 };
 }

 componentDidMount() {
 // Load editor data (raw js object) from local storage
 const rawEditorData = this.getSavedEditorData();
 if (rawEditorData !== null) {
 const contentState = convertFromRaw(rawEditorData);
 this.setState({
 editorState: EditorState.createWithContent(contentState),
 });
 }
 }

 saveEditorContent(data) {
 localStorage.setItem("editorData", JSON.stringify(data));
 }

 getSavedEditorData() {
 const savedData = localStorage.getItem("editorData");

 return savedData ? JSON.parse(savedData) : null;
 }

 handleKeyCommand(command) {
 const { editorState } = this.state;
 const newState = RichUtils.handleKeyCommand(editorState, command);
 if (newState) {
 this.onChange(newState);
 return true;
 }
 return false;
 }

 renderContentAsRawJs() {
 const contentState = this.state.editorState.getCurrentContent();
 const raw = convertToRaw(contentState);

 return JSON.stringify(raw, null, 2);
 }

 render() {
 return (
 <div>
 <h4>Draft js editor</h4>
 <div className="editor-container">
 <Editor
 handleKeyCommand={this.handleKeyCommand.bind(this)}
 editorState={this.state.editorState}
 onChange={this.onChange}
 />
 </div>
 <h4>Editor content as raw JS</h4>
 <pre>{this.renderContentAsRawJs()}</pre>
 </div>
 );
 }
}

export default DraftEditorRawExample;
```

_Here is a working demo: [https://github.com/tumetus/draft-js-to-raw](https://github.com/tumetus/draft-js-to-raw)_

In the example the component has a Draft.js editor and a pre-element that displays the editor content as raw javascript. It also saves the editor’s content to local storage so that when you refresh the page, the editor is populated with the saved data.

Saving and loading makes use of the _convertToRaw_ and _convertFromRaw_ methods mentioned earlier. So in this example you could also save the data for example to a server, instead of just saving it to local storage. For convenience reasons I made this example to save the data to local storage.

So as we see saving and loading Draft.js editor content is pretty straight forward in the end. If you have any questions or comments feel free to leave your comment below.

In this article I teach you how to store Draft.js content.

How to store Draft.js content

I know this comes a way late, but I had written this short summary, about my experience in React Finland, right after the conference but just didn't get around to finish and publish it. So I'm doing it now.
<a href="http://www.react-finland.fi">React Finland</a> was held for the first time last April. The event had three days where the first day was for workshops, where you could attend 1-2 workshops, and two days for the actual conference. I attended all three days (shoutout to <a href="http://jakamo.net">Jakamo</a> for sponsoring the tickets).
My choice of workshops was a testing workshop held by Sara Vieira &#x26; Kasia Jastrzębska and component driven development workshop held by Andrey Okonetchnikov &#x26; Artem Sapegin. It wasn't an easy choice since there were quite a few interesting workshops to choose from.
I had previous experience about writing tests for javascript but none for writing for React components. The workshop was very beginner friendly and hands on, which I liked given my experience on the subject. Component driven development workshop was also interesting. The idea of component driven development was quite new for me. It was a good mix of theory and actual coding.
<a href="https://twitter.com/kejt_bw/status/988731194060824577">Tweet: "We had the best attendees...</a>
When it comes to the actual conference days, I listened almost all of the talks and there were some quite interesting ones. Once again, I got reminded of the fact how little one actually knows. I'd say my favorite talks were about Immer, Reason, Reactive state machines and statecharts, Styled components, Ken Wheeler's "How React changed everything" and Sven Sauleau's "Understanding the differences is accepting". You can check out the talks from <a href="https://www.youtube.com/watch?v=zSAA4SqZFr0&#x26;list=PL-a9lBflNu2rXmXqorswbrjNkCKypXOrE">YouTube</a>. I think the organisers did a good job choosing the speakers and it was a good mix of entertaining and educating talks.
<a href="https://twitter.com/flexbox_/status/989146166750318593">Tweet: Everything is fine...</a>
Overall React Finland was a conference that I really enjoyed. I met great people, I learned a lot and I learned that I need to learn a lot more. If I have the opportunity I will definitely attend also next year!


I know this comes a way late, but I had written this short summary, about my experience in React Finland, right after the conference but just didn't get around to finish and publish it. So I'm doing it now.

[React Finland](http://www.react-finland.fi) was held for the first time last April. The event had three days where the first day was for workshops, where you could attend 1-2 workshops, and two days for the actual conference. I attended all three days (shoutout to [Jakamo](http://jakamo.net) for sponsoring the tickets).

My choice of workshops was a testing workshop held by Sara Vieira & Kasia Jastrzębska and component driven development workshop held by Andrey Okonetchnikov & Artem Sapegin. It wasn't an easy choice since there were quite a few interesting workshops to choose from.

I had previous experience about writing tests for javascript but none for writing for React components. The workshop was very beginner friendly and hands on, which I liked given my experience on the subject. Component driven development workshop was also interesting. The idea of component driven development was quite new for me. It was a good mix of theory and actual coding.

[Tweet: "We had the best attendees...](https://twitter.com/kejt_bw/status/988731194060824577)

When it comes to the actual conference days, I listened almost all of the talks and there were some quite interesting ones. Once again, I got reminded of the fact how little one actually knows. I'd say my favorite talks were about Immer, Reason, Reactive state machines and statecharts, Styled components, Ken Wheeler's "How React changed everything" and Sven Sauleau's "Understanding the differences is accepting". You can check out the talks from [YouTube](https://www.youtube.com/watch?v=zSAA4SqZFr0&list=PL-a9lBflNu2rXmXqorswbrjNkCKypXOrE). I think the organisers did a good job choosing the speakers and it was a good mix of entertaining and educating talks.

[Tweet: Everything is fine...](https://twitter.com/flexbox_/status/989146166750318593)

Overall React Finland was a conference that I really enjoyed. I met great people, I learned a lot and I learned that I need to learn a lot more. If I have the opportunity I will definitely attend also next year!


React Finland 2018

In this post we will create a bar chart component with React and use it to display an array of objects with x and y properties. We will use react-vis library to do this.
This is what our finished bar chart will look like.
<img src="./images/Screen-Shot-2018-06-20-at-20.59.30-300x196.png" alt="bar chart">
React-vis is an open source library for displaying all kinds of visual representations of data. It can do very many things including complex graphs with complex datasets. When you open up the documentation, it can be a bit overwhelming and hard to find how to exactly create a basic bar chart. So we will create just a basic bar chart that will do the job and you can tweak it more if you need to.
I am using yarn for managing packages. You can download yarn from here <a href="https://yarnpkg.com/en/docs/install">https://yarnpkg.com/en/docs/install</a> . If you prefer npm instead, just substitute the yarn commands with corresponding npm commands.
We will create an example project from scratch to play around with react-vis. I decided to use create-react-app for this and in the matter of fact the react-vis documentation also offers instructions how to do this (<a href="https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project">https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project</a>). If you’d like to use your existing project, you can just skip the create-react-app part and run “yarn add react-vis” in your project directory.
First, if you haven’t done so already, we install create-react-app “npm install -g create-react-app”.
Then we create our project and install react-vis to it.
<pre><code class="language-terminal">create-react-app my-barchart-app
cd my-barchart-app
yarn add react-vis
</code></pre>
Now we are ready for some charts! Let’s create a new file and name it MyBarChart.js. Then import React and add the following code to it.
<pre><code class="language-jsx">// MyBarChart.js
import React from "react";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return &#x3C;div>barchart!&#x3C;/div>;
 }
}

export default MyBarChart;
</code></pre>
Ok so we have a component that renders div with text “barchart!”. We also defined some variables in the render method. data-variable will represent the dataset we want to render, it will be passed to the component as props. chartWidth and chartHeight will be used to set the width and height of the chart. chartDomain will be used to set the yDomain-prop of the bar chart. yDomain is an array with two numbers. First number will indicate the value of the lowest point on the y-axis (bottom of the chart) and the second number will indicate the value of the highest point on the y-axis (top of the chart). We will use 0 for the first number, so that the y-axis starts from 0, and chartHeight for the second value.
Next up let’s import the MyBarChart component to our app and render it. Our App-component should look something like this.
<pre><code class="language-jsx">// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
class App extends Component {
 render() {
 return (
 &#x3C;div className="App">
         &#x3C;MyBarChart />
      {" "}
 &#x3C;/div>
 );
 }
}
export default App;
</code></pre>
Ok cool, we have our component rendering “barchart!”. Let’s actually add the bar chart now!
We are going to use XYPlot component provided by react-vis. It will act as a wrapper for all the other components we are going to use for the bar chart.
React-vis uses different Series components for displaying a chart. For bar chart we will use BarSeries components and as we want our bars to be vertical, we’ll use VerticalBarSeries component. If we wanted horizontal bars we’d use (surprise) HorizontalBarSeries.
VerticalBarSeries component will draw the rectangles (=bars). In minimum it only requires a data-prop to be passed to it. The data object should be an array containing objects for each bar.
The objects should have x- and y-keys. I created an example dataset that we will use. We will create a data.json file to our src folder and copy paste the json data shown below.
<pre><code class="language-json">[
 { "y": 100, "x": "Jan" },
 { "y": 112, "x": "Feb" },
 { "y": 230, "x": "Mar" },
 { "y": 268, "x": "Apr" },
 { "y": 300, "x": "May" },
 { "y": 310, "x": "Jun" },
 { "y": 315, "x": "Jul" },
 { "y": 340, "x": "Aug" },
 { "y": 388, "x": "Sep" },
 { "y": 404, "x": "Oct" },
 { "y": 442, "x": "Nov" },
 { "y": 447, "x": "Dec" }
]
</code></pre>
Now we can import this data in our App-component and pass it to the MyBarChart-component.  After this our App-component and MyBarChart-component should look like this.
<pre><code class="language-jsx">// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
import data from "./data.json";

class App extends Component {
 render() {
 return (
 &#x3C;div className="App">
         &#x3C;MyBarChart data={data} />
      {" "}
 &#x3C;/div>
 );
 }
}

export default App;
</code></pre>
<pre><code class="language-jsx">// MyBarChart.js
import React from "react";
import { XYPlot, VerticalBarSeries } from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 &#x3C;XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 &#x3C;VerticalBarSeries data={data} />
            {" "}
 &#x3C;/XYPlot>
 );
 }
}

export default MyBarChart;
</code></pre>
Now when you save your files and view the app on browser, you should see some nicely rendered bars.
Ok that’s cool, but we want to also show the x- and y-axis. For this react-vis provides XAxis- and YAxis-components. They are just placed inside the XYPlot component and boom we have x- and y-axis on our chart.
Our bar chart is starting to look good. One more thing we can do is to display the value of each bar on top of the bar. React-vis comes with LabelSeries component that enables us to display labels for each datapoint. In order for LabelSeries to work with our data, we need to add label-key to our data and pass it to the LabelSeries component.
By default LabelSeries will automatically calculate the position for the label based on the position of the datapoint on the chart. For example if we are near the right hand side of the chart, the label will be displayed left from the datapoint or if we are near the bottom of the chart the label will be displayed on top of the datapoint.
For our chart, we don’t want the automatic positioning but we want the label to always be on top of the datapoint and horizontally centered. To achieve this we use LabelSeries props labelAnchorX and labelAnchorY. labelAnchorX value will be “middle” and labelAnchorY value will be “text-after-edge”. More info for about other values for these props can be found from the docs <a href="https://uber.github.io/react-vis/documentation/series-reference/label-series">https://uber.github.io/react-vis/documentation/series-reference/label-series</a> .
This is what our finished MyBarChart-component should look like.
<pre><code class="language-jsx">// MyBarChart.js
import React from "react";
import {
 XYPlot,
 XAxis, // Shows the values on x axis
 YAxis, // Shows the values on y axis
 VerticalBarSeries,
 LabelSeries,
} from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 &#x3C;XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 &#x3C;XAxis />
                 &#x3C;YAxis />
                 &#x3C;VerticalBarSeries data={data} />
                 &#x3C;LabelSeries
 data={data.map((obj) => {
 return { ...obj, label: obj.y.toString() };
 })}
 labelAnchorX="middle"
 labelAnchorY="text-after-edge"
 />
             
 &#x3C;/XYPlot>
 );
 }
}

export default MyBarChart;
</code></pre>
<h2>Conclusion</h2>
Creating charts with React and react-vis is pretty straight forward once you know your way around the react-vis components. There is a lot more you can do with react-vis and if you work with or are interested about data visualisation, for sure go ahead and check out the <a href="https://uber.github.io/react-vis/documentation/welcome-to-react-vis">documentation</a> for more complex examples.
You can find the complete source code for this tutorial from GitHub: <a href="https://github.com/tumetus/react-vis-bar-chart">https://github.com/tumetus/react-vis-bar-chart</a>
Charts are great way to visualise data. If you wish to learn more about different kind of charts, I recommend you check out <a href="https://jscharting.com/blog/bar-and-column-charts/">this</a> blog post.

In this post we will create a bar chart component with React and use it to display an array of objects with x and y properties. We will use react-vis library to do this.

This is what our finished bar chart will look like.

![bar chart](/blog-posts/how-to-create-a-bar-chart-with-react/images/Screen-Shot-2018-06-20-at-20.59.30-300x196.png)

React-vis is an open source library for displaying all kinds of visual representations of data. It can do very many things including complex graphs with complex datasets. When you open up the documentation, it can be a bit overwhelming and hard to find how to exactly create a basic bar chart. So we will create just a basic bar chart that will do the job and you can tweak it more if you need to.

_I am using yarn for managing packages. You can download yarn from here [https://yarnpkg.com/en/docs/install](https://yarnpkg.com/en/docs/install)_ _. If you prefer npm instead, just substitute the yarn commands with corresponding npm commands._

We will create an example project from scratch to play around with react-vis. I decided to use create-react-app for this and in the matter of fact the react-vis documentation also offers instructions how to do this ([https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project](https://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project)). If you’d like to use your existing project, you can just skip the create-react-app part and run “_yarn add react-vis_” in your project directory.

First, if you haven’t done so already, we install create-react-app “_npm install -g create-react-app_”.

Then we create our project and install react-vis to it.

```terminal
create-react-app my-barchart-app
cd my-barchart-app
yarn add react-vis
```

Now we are ready for some charts! Let’s create a new file and name it MyBarChart.js. Then import React and add the following code to it.

```jsx
// MyBarChart.js
import React from "react";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return <div>barchart!</div>;
 }
}

export default MyBarChart;
```

Ok so we have a component that renders div with text “barchart!”. We also defined some variables in the render method. _data_-variable will represent the dataset we want to render, it will be passed to the component as props. _chartWidth_ and _chartHeight_ will be used to set the width and height of the chart. _chartDomain_ will be used to set the yDomain-prop of the bar chart. yDomain is an array with two numbers. First number will indicate the value of the lowest point on the y-axis (bottom of the chart) and the second number will indicate the value of the highest point on the y-axis (top of the chart). We will use 0 for the first number, so that the y-axis starts from 0, and chartHeight for the second value.

Next up let’s import the MyBarChart component to our app and render it. Our App-component should look something like this.

```jsx
// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
class App extends Component {
 render() {
 return (
 <div className="App">
         <MyBarChart />
      {" "}
 </div>
 );
 }
}
export default App;
```

Ok cool, we have our component rendering “barchart!”. Let’s actually add the bar chart now!

We are going to use XYPlot component provided by react-vis. It will act as a wrapper for all the other components we are going to use for the bar chart.

React-vis uses different Series components for displaying a chart. For bar chart we will use BarSeries components and as we want our bars to be vertical, we’ll use VerticalBarSeries component. If we wanted horizontal bars we’d use (surprise) HorizontalBarSeries.

VerticalBarSeries component will draw the rectangles (=bars). In minimum it only requires a data-prop to be passed to it. The data object should be an array containing objects for each bar.

The objects should have x- and y-keys. I created an example dataset that we will use. We will create a data.json file to our src folder and copy paste the json data shown below.

```json
[
 { "y": 100, "x": "Jan" },
 { "y": 112, "x": "Feb" },
 { "y": 230, "x": "Mar" },
 { "y": 268, "x": "Apr" },
 { "y": 300, "x": "May" },
 { "y": 310, "x": "Jun" },
 { "y": 315, "x": "Jul" },
 { "y": 340, "x": "Aug" },
 { "y": 388, "x": "Sep" },
 { "y": 404, "x": "Oct" },
 { "y": 442, "x": "Nov" },
 { "y": 447, "x": "Dec" }
]
```

Now we can import this data in our App-component and pass it to the MyBarChart-component.  After this our App-component and MyBarChart-component should look like this.

```jsx
// App.js
import React, { Component } from "react";
import "./App.css";
import MyBarChart from "./MyBarChart";
import data from "./data.json";

class App extends Component {
 render() {
 return (
 <div className="App">
         <MyBarChart data={data} />
      {" "}
 </div>
 );
 }
}

export default App;
```

```jsx
// MyBarChart.js
import React from "react";
import { XYPlot, VerticalBarSeries } from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 <XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 <VerticalBarSeries data={data} />
            {" "}
 </XYPlot>
 );
 }
}

export default MyBarChart;
```

Now when you save your files and view the app on browser, you should see some nicely rendered bars.

Ok that’s cool, but we want to also show the x- and y-axis. For this react-vis provides XAxis- and YAxis-components. They are just placed inside the XYPlot component and boom we have x- and y-axis on our chart.

Our bar chart is starting to look good. One more thing we can do is to display the value of each bar on top of the bar. React-vis comes with LabelSeries component that enables us to display labels for each datapoint. In order for LabelSeries to work with our data, we need to add label-key to our data and pass it to the LabelSeries component.

By default LabelSeries will automatically calculate the position for the label based on the position of the datapoint on the chart. For example if we are near the right hand side of the chart, the label will be displayed left from the datapoint or if we are near the bottom of the chart the label will be displayed on top of the datapoint.

For our chart, we don’t want the automatic positioning but we want the label to always be on top of the datapoint and horizontally centered. To achieve this we use LabelSeries props labelAnchorX and labelAnchorY. labelAnchorX value will be “middle” and labelAnchorY value will be “text-after-edge”. More info for about other values for these props can be found from the docs [https://uber.github.io/react-vis/documentation/series-reference/label-series](https://uber.github.io/react-vis/documentation/series-reference/label-series) .

This is what our finished MyBarChart-component should look like.

```jsx
// MyBarChart.js
import React from "react";
import {
 XYPlot,
 XAxis, // Shows the values on x axis
 YAxis, // Shows the values on y axis
 VerticalBarSeries,
 LabelSeries,
} from "react-vis";

class MyBarChart extends React.Component {
 render() {
 const data = this.props.data;
 const chartWidth = 800;
 const chartHeight = 500;
 const chartDomain = [0, chartHeight];
 return (
 <XYPlot
 xType="ordinal"
 width={chartWidth}
 height={chartHeight}
 yDomain={chartDomain}
 >
                 <XAxis />
                 <YAxis />
                 <VerticalBarSeries data={data} />
                 <LabelSeries
 data={data.map((obj) => {
 return { ...obj, label: obj.y.toString() };
 })}
 labelAnchorX="middle"
 labelAnchorY="text-after-edge"
 />
             
 </XYPlot>
 );
 }
}

export default MyBarChart;
```

## Conclusion

Creating charts with React and react-vis is pretty straight forward once you know your way around the react-vis components. There is a lot more you can do with react-vis and if you work with or are interested about data visualisation, for sure go ahead and check out the [documentation](https://uber.github.io/react-vis/documentation/welcome-to-react-vis) for more complex examples.

_You can find the complete source code for this tutorial from GitHub: [https://github.com/tumetus/react-vis-bar-chart](https://github.com/tumetus/react-vis-bar-chart)_

Charts are great way to visualise data. If you wish to learn more about different kind of charts, I recommend you check out [this](https://jscharting.com/blog/bar-and-column-charts/) blog post.

Learn how to create a bar chart with React using react-vis.