Instaling MUI X Charts for React

MUI X Charts is a fast and extendable library of react chart components for data visualization.

Last post update: Abril 15. 2024.

For add charts you will need at least 

Installing main depencences:

   

     npm install @mui/material @emotion/react @emotion/styled

Then you must install "x-charts" just for charts components:

   

      npm install @mui/x-charts

You have to create a index component for example: 

   

    

import { StyledEngineProvider } from "@mui/material";

import React from "react";

import Grafica from "./Grafica";

import { PageProps } from "@/types";

const Index = () => {

    return (

        <>

            <div className="graficas">

                <div className="contenedor-grafica">

                    <React.StrictMode>

                        <StyledEngineProvider injectFirst>

                            <Grafica mivalor={mivalor} />

                        </StyledEngineProvider>

                    </React.StrictMode>

                </div>

            </div>

        </>

    );

};

export default Index;

In othert componente you have to create a chart: 

you must install "x-charts" just for charts components:

   

      

import { BarChart } from "@mui/x-charts/BarChart";

export default function ChartsOverViewDemo({ mivalor }: { mivalor: string }) {

    return (

        <>

            <h1>{mivalor}</h1>

            <BarChart

                series={[

                    { data: [35, 44, 24, 34] },

                    { data: [51, 6, 49, 30] },

                    { data: [15, 25, 30, 50] },

                    { data: [60, 50, 15, 25] },

                ]}

                height={290}

                xAxis={[{ data: ["Q1", "Q2", "Q3", "Q4"], scaleType: "band" }]}

                margin={{ top: 10, bottom: 30, left: 40, right: 10 }}

            />

        </>

    );

}

Now you have data from index. -- Not included in this post. --

References:

https://mui.com/x/react-charts/