To create charts in React apps, wd can use the React Chartkick NPM package.

We can get started easily.

Create Charts

We run the following commands to install the packages we need:

yarn add react-chartkick chart.js

Chart.js is a dependency required for React Chartkick, so we have to install it.

Then we can create our chart as follows:

import React from "react";
import { LineChart } from "react-chartkick";
import "chart.js";

const data = { "2020-01-01": 11, "2020-01-02": 6, "2020-01-03": 10 };
export default function App() {
  return (
    <div className="App">
      <LineChart data={data} />
    </div>
  );
}

We just create an object with the x-axis labels as the keys and the corresponding values for the y-axis.

Once we did that, we get:

To create a bar chart, we can write:

import React from "react";
import { BarChart } from "react-chartkick";
import "chart.js";

const data = [["eat", 32], ["drink", 100]];
export default function App() {
  return (
    <div className="App">
      <BarChart data={data} />
    </div>
  );
}

The data structure and component to import are different, but we can create one without much effort.

Once we wrote the code above, we get:

The React Chartkick package support many other kinds of charts like pie charts, area charts, geo charts, and more.

Options

We can customize the options of the charts to suit our needs.

For instance, we can set the min and max values for the x-axis.

We can use the xmin and xmax props as follows:

import React from "react";
import { LineChart } from "react-chartkick";
import "chart.js";

const data = { "2020-01-01": 11, "2020-01-02": 6, "2020-01-03": 10 };

export default function App() {
  return (
    <div className="App">
      <LineChart data={data} xmin="2020-01-01" xmax="2020-01-03" />
    </div>
  );
}

We make sure that our data matches the x-axis ranges.

Likewise, we can set the range for the y-axis by writing:

import React from "react";
import { LineChart } from "react-chartkick";
import "chart.js";

const data = { "2020-01-01": 11, "2020-01-02": 6, "2020-01-03": 10 };

export default function App() {
  return (
    <div className="App">
      <LineChart
        data={data}
        min={0}
        max={20}
        xmin="2020-01-01"
        xmax="2020-01-03"
      />
    </div>
  );
}

To change the color of the line, we can use the colors prop:

import React from "react";
import { LineChart } from "react-chartkick";
import "chart.js";

const data = { "2020-01-01": 11, "2020-01-02": 6, "2020-01-03": 10 };

export default function App() {
  return (
    <div className="App">
      <LineChart data={data} colors={["green"]} />
    </div>
  );
}

We just pass in an array to change the line color.

One we wrote our code, we get:

Labels and Legends

The React Chartkick NPM package provides with props to enable a legend.

We set the legend prop to true to display a legend.

Then we use the label prop to add text to the legend.

To set the titles for the x and y axes, we can use the xtitle and ytitle props respectively.

For instance, we can write:

import React from "react";
import { LineChart } from "react-chartkick";
import "chart.js";

const data = { "2020-01-01": 11, "2020-01-02": 6, "2020-01-03": 10 };

export default function App() {
  return (
    <div className="App">
      <LineChart
        data={data}
        label="Population"
        legend={true}
        xtitle="Time"
        ytitle="Population"
      />
    </div>
  );
}

Once we did that, we get:

The React Chartkick NPM package has chart components that take many more props to let us create charts.

It’s one of the easiest libraries for us to create charts in React apps.

To create a radio button group with React and set the default checked value of it, we have to set the value to the state that we want.

Then we’ve to set the checked prop to be the expression to compare the value of the radio button with the currently selected value.

This way, React will check the right one.

We also need an onChange handler to update the state to the right value.

To do all that, we write:

import React, { useState } from "react";

const fruits = ["orange", "apple", "grape"];

export default function App() {
  const [fruit, setFruit] = useState("apple");
  return (
    <div className="App">
      {fruits.map(f => (
        <>
          <input
            type="radio"
            name="fruit"
            value={f}
            checked={fruit === f}
            onChange={e => setFruit(e.currentTarget.value)}
          />{" "}
          {f}
        </>
      ))}
      <p>{fruit}</p>
    </div>
  );
}

We have the fruits array, which we use to map the values to radio buttons.

Radio buttons are input elements with type 'radio'.

The name attribute also have to be set to the same name so that we know that they’re in the same group.

The value attribute is set to the fruit state, so that we can update the checked value by comparison fruit with the value of the value attribute of the radio button.

We have:

onChange={e => setFruit(e.currentTarget.value)}

which gets the e.currentTarget.value property, which has the currently checked radio buttons’ value and set it as the value of the fruit state.

This will update the radio button when we click on it.

Then we display the value of the radio button that’s checked below so that we can see what we actually selected.

To set the default value, we just set the initial value of the fruit state since we used that as the value of the value prop.

The button that’s clicked should have the same value that’s displayed.

To set the default value of a React radio button element, we just have to set the value prop to the state value that we want.

We can set the default value of a React select element by using the useState hook.

The default value can be set as the default value of the hook. Then we can set it as the value of the value prop of the select element.

For instance, we can write:

import React, { useState } from "react";

const fruits = ["orange", "apple", "grape"];

export default function App() {
  const [fruit, setFruit] = useState("apple");
  return (
    <div className="App">
      <select
        value={fruit}
        onChange={e => setFruit(fruits[e.target.selectedIndex])}
      >
        {fruits.map(f => (
          <option value={f}>{f}</option>
        ))}
      </select>
      <p>{fruit}</p>
    </div>
  );
}

We set the value prop to fruit so that we set the initial value of it.

We map the fruits entries to the option elements.

Then we add an onChange handler to call setFruit as we change selection.

We get the selected value from the fruits array by writing:

fruits[e.target.selectedIndex]

so that we get the string given the index of the selected option.

Then we display the selected value so that we can see what we selected below the select element.

Since we set the initial value of the fruit state to 'apple', that’s what we display when we load the select element, which means that it’s the default value.

Now we can have default values for our React select elements.