MUI X Charts avanced React UI for complex use cases

MUI X is a collection of advanced React UI components for complex use cases. Use the native integration with Material UI or extend your design system.




MUI X is a collection of advanced UI components, including:

  • Data Grid
  • Date and Time Pickers
  • Charts
  • Tree View

References:

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

Comments

Post a Comment

Popular posts from this blog

How to create a React application with Vite and TypeScript from scratch

Image
 What is vite? Vite is a high-performance asynchronous and event-driven framework for building web applications in the Node.js runtime. It provides a fast development experience by leveraging modern JavaScript features such as ES modules and native browser support for dynamic imports. Vite is known for its quick startup time and efficient hot module replacement (HMR) capability, making it an attractive choice for developers looking to build modern web applications. What I need?  For use React you will need have installed node JS. Proccess 1.- Create a new folder If you use Linux Create a new folder with write permision example:           sudo mkdir /home/benjamin/react-demo/ Give write permission to folder           sudo chmod -R 777 /home/benjamin/react-demo/ 2.- Create vite and Type script project Run this command inside the newly created folder.           npm create vite@latest You will have to select Framework: React You will have to select variant: TypeScript If everything goes we
Read more

Instaling MUI X Charts for React

Image
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} />                      
Read more