Como criar um grafico dessa forma?

[Palomasanttana]

Prezados, boa tarde!

 

Como eu posso criar um grafico dessa forma para colocar em um card?

 

[Tiago Craici - Xperiun]

3 horas atrás, Palomasanttana disse:

Prezados, boa tarde!

 

Como eu posso criar um grafico dessa forma para colocar em um card?

 

Boa noite @Palomasanttana! 
Bora fazer essa barra animada em HTML?! 


Veja abaixo como que fica:




Medida:
 

Barra progresso V2 =

var vMedida = 30 -- aqui você coloca sua medida que resultará em sua % no gráfico 

 

return

"

<div class='progress-bar'>

  <div class='progress' style='width:"& vMedida &"%;'>

  "& vMedida &"%

  </div>

</div>

 

<style>

  .progress-bar {

    width: 100%;

    background-color: #BDBDBD; 

    margin-bottom: 20px;

    border-radius: 15px;

  }

 

  .progress {

    height: 20px;

    line-height: 20px;

    text-align: center;

    color: white;

    background-color: #4CAF50;

    animation-name: progress-animation;

    animation-duration: 5s;

    animation-timing-function: ease-in-out;

    border-radius: 15px;

  }

 

  @keyframes progress-animation {

    0% {

      width: 0%;

    }

    100% {

      width:" & vMedida & "%;

    }

  }

</style>

"

Utilizado o visual "HTML CONTENT"



Em anexo o pbix conforme acima. 
Sucesso! 🚀🥇 








 

Exemplo barra progresso HTML.pbix

Editado Julho 31, 2023 por Tiago Craici

[edmar]

você pode usar um gráfico de barra empilhada horizontal onde você teria duas medidas uma de percentual que seria o 73% chamarei de percentual e aí você criaria uma outra que seria diferença exemplo 1-percentual= 27%

então no gráfico você coloca essas duas medidas.

[Ezequiel Pedreira]

Olá @Palomasanttana, complementando a ideia do Edmar, segue dois videos ensinando a fazer na prática com visuais nativos. 

https://www.youtube.com/watch?v=-Le-VgMREkA

https://www.youtube.com/watch?v=90ZKJa13a0k

 

[Tiago Craici - Xperiun]

... em background-color você pode alterar as cores (verde, cinza) conforme desejado.