logo
  • Mercado
  • Dashboard
    Novo
  • Ações
  • Cotações
  • Screener
  • Heatmap
  • FIIs
  • Cotações
  • Screener
  • Rendimentos
  • Renda Fixa
  • Tesouro Direto
  • CDB / LCI / LCA
  • Debêntures
  • Curva de Juros
  • Derivativos
  • Opções
  • Futuros
  • Câmbio
  • Visão Geral
  • Book de Ofertas
  • Minhas Cotações
  • Fundos
  • Todos os Fundos
  • Screener
  • Economia
  • Indicadores Macro
  • Boletim Focus
  • Calendário Econômico
  • Portfólio
  • Minha Carteira
  • Watchlist
  • Alertas
  • Compras Públicas
  • Licitações
  • Buscar
  • Minhas Licitações
  • Pregão ao Vivo
  • Contratos
  • Atas de Preço
  • Dashboard Gov
  • BI & Analytics
  • Dashboards BI
  • Relatórios
  • Ferramentas
  • Notícias
  • Chat
  • Assban Pulso AI
    Beta
  • Calculadoras
  • IR Investimentos
  • Taxa Líquida
  • Preço Médio
  • Simulador Tesouro
  • Gráficos
  • Line
  • Candlestick
  • Doughnut & Pie
  • Gauge
  • Configurações
  • Meu Perfil
  • Configurações
  • API Keys
  • Certificado Digital
  • Ajuda
Usuário
Assban Pulso

GaugeCharts

  1. Home

  2. GaugeCharts

breadcrumbImg
Basic Chart
Sample Code

import * as React from 'react';
import Stack from '@mui/material/Stack';
import { Gauge } from '@mui/x-charts/Gauge';

const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'BasicGaugesChart ',
},
]; 

export default function BasicGaugesChart() {
    return (

            <Stack direction={{ xs: 'column', md: 'row' }} spacing={{ xs: 1, md: 3 }}>
                <Gauge width={200} height={200} value={60} />
                <Gauge width={200} height={200} value={60} startAngle={-90} endAngle={90} />
            </Stack>
    );
}



6060
ArcDesign Chart
Sample Code

import * as React from 'react';
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge';
   
const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'ArcDesignChart ',
},
]; 
const settings = {
    width: 200,
    height: 200,
    value: 60,
};

export default function ArcDesignChart() {
    return (
       

            <Gauge
                {...settings}
                cornerRadius="50%"
                sx={(theme) => ({
                    [`& .${gaugeClasses.valueText}`]: {
                fontSize: 40,
                    },
            [`& .${gaugeClasses.valueArc}`]: {
                fill: '#5D87FF',
                    },
            [`& .${gaugeClasses.referenceArc}`]: {
                fill: theme.palette.text.disabled,
                    },
                })}
            />
  
    );
}



60
GaugePointer Chart
Sample Code

import React from 'react'
import {
    GaugeContainer,
    GaugeValueArc,
    GaugeReferenceArc,
    useGaugeState,
} from '@mui/x-charts/Gauge';



const BCrumb = [
{
to: '/',
title: 'Home',
},
{
title: 'GaugePointerChart ',
},
]; 



function GaugePointer() {
    const { valueAngle, outerRadius, cx, cy } = useGaugeState();

    if (valueAngle === null) {
        // No value to display
        return null;
    }

    const target = {
        x: cx + outerRadius * Math.sin(valueAngle),
        y: cy - outerRadius * Math.cos(valueAngle),
    };
    return (
        <g>
            <circle cx={cx} cy={cy} r={5} fill="red" />
            <path
                d={`M ${cx} ${cy} L ${target.x} ${target.y}`}
            stroke="red"
            strokeWidth={3}
            />
        </g>
    );
}

export default function GaugePointerChart() {
    return (

        <GaugeContainer
            width={200}
            height={200}
            startAngle={-110}
            endAngle={110}
            value={30}
        >
            <GaugeReferenceArc />
            <GaugeValueArc />
            <GaugePointer />
        </GaugeContainer>
    );
}