# Gráfico amCharts

**URL:** <https://community.latromi.com.br/t/grafico-amcharts/1103>\
**Category:** Ajuda & Suporte\
**Tags:** charts, javascript\
**Created:** [Agosto 21, 2023, 5:31pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103 "2023-08-21T17:31:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 21, 2023, 5:31pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/1 "2023-08-21T17:31:43Z")

</div>

Bom tarde, estou realizando gráficos utilizando o amcharts alterando os dados que alimentam o gráfico.  
Modelo utilizado: stacked  
Ele deve ter 3 valores em cada coluna com categorias diferentes.  
Os valores são altos e mesmo testando outros modelos, ocorre o mesmo problema.

A parte de menor valor fica ‘escondida’

 ![image](https://community.latromi.com.br/uploads/default/original/2X/7/7c97cf2f1918b835a30fb3d9bbcc17e601530479.png)

Se retiro o Faturamento e Média retorna as quantidades como se estivesse atras das informações anteriores.

 ![image](https://community.latromi.com.br/uploads/default/original/2X/5/5a1e93daffb999892c64b2da6c416fd040e137da.png)

Poderias me ajudar a resolver isto ?

Desde já Agradeço!

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Agosto 21, 2023, 5:55pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/2 "2023-08-21T17:55:32Z")

</div>

Olá @LindaBarichello!

Compartilhe o código do gráfico (`</> code`) por favor

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 21, 2023, 6:08pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/3 "2023-08-21T18:08:24Z")

</div>

Oi, @daniel.giacomelli , segue o comando com os valores fixados.

```json
{
	"type": "serial",
	"categoryField": "category",
	"startDuration": 1,
	"categoryAxis": {
		"gridPosition": "start"
	},
	"trendLines": [],
	"graphs": [
		{
			"balloonText": "[[title]] of [[category]]:[[value]]",
			"fillAlphas": 1,
			"id": "AmGraph-1",
			"labelAnchor": "middle",
			"precision": -1,
			"title": "Faturamento",
			"type": "column",
			"valueField": "Faturamento"
		},
		{
			"balloonText": "[[title]] of [[category]]:[[value]]",
			"fillAlphas": 1,
			"id": "AmGraph-2",
			"title": "Quantidade de Cargas",
			"type": "column",
			"valueField": "Quantidade de Carga"
		},
		{
			"fillAlphas": 1,
			"id": "AmGraph-4",
			"maxBulletSize": 10000000,
			"minBulletSize": 2,
			"title": "Média",
			"type": "column",
			"valueField": "Media"
		}
	],
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"stackType": "regular",
			"title": "Axis title"
		}
	],
	"allLabels": [],
	"balloon": {},
	"legend": {
		"enabled": true,
		"useGraphSettings": true
	},
	"titles": [
		{
			"id": "Title-1",
			"size": 15,
			"text": "Chart Title"
		}
	],
	"dataProvider": [
		{
			"category": "TERCEIRO",
			"Faturamento": 36852926.31,
			"Quantidade de Carga": 4725,
			"Media": "7800.83"
		},
		{
			"category": "FROTA ASSOCIADO",
			"Faturamento": 45710305.72,
			"Quantidade de Carga": 2965,
			"Media": "15416.6"
		},
		{
			"category": "AGREGADO",
			"Faturamento": 25446043.96,
			"Quantidade de Carga": 2904,
			"Media": "8762.41"
		},
		{
			"category": "FROTA PRÓPRIA",
			"Faturamento": "21330662.68",
			"Quantidade de Carga": "2123",
			"Media": "10047.42"
		}
	]
}

```

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Agosto 22, 2023, 4:37pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/4 "2023-08-22T16:37:43Z")

</div>

@LindaBarichello não há muito o que fazer neste caso.

Quando os gráficos possuem valores muito distantes um do outro, a visualização acaba sendo prejudicada.

Minha sugestão é alterar usar outras abordagens, como por exemplo, usar um eixo separado para o Faturamento:

 ![image](https://community.latromi.com.br/uploads/default/original/2X/9/99a7836a30c5c41322f69ab5217d34ced5b65294.png)

```json
{
	"type": "serial",
	"categoryField": "category",
	"startDuration": 1,
	"categoryAxis": {
		"gridPosition": "start"
	},
	"trendLines": [],
	"graphs": [
		{
			"balloonText": "[[title]] of [[category]]:[[value]]",
			"fillAlphas": 1,
			"fillColors": "#7DAC4D",
			"id": "AmGraph-2",
			"title": "Quantidade de Cargas",
			"type": "column",
			"valueField": "Quantidade de Carga"
		},
		{
			"fillAlphas": 1,
			"id": "AmGraph-4",
			"maxBulletSize": 10000000,
			"minBulletSize": 2,
			"title": "Média",
			"type": "column",
			"valueField": "Media"
		},
		{
			"bullet": "round",
			"lineColor": "#C41E3A",
			"id": "AmGraph-1",
			"title": "graph 1",
			"type": "smoothedLine",
			"valueAxis": "Fat-Axis",
			"valueField": "Faturamento"
		}
	],
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"stackType": "regular",
			"title": "Axis title"
		},
		{
			"id": "Fat-Axis",
			"position": "right",
			"title": "Faturamento"
		}
	],
	"allLabels": [],
	"balloon": {},
	"legend": {
		"enabled": true,
		"useGraphSettings": true
	},
	"titles": [
		{
			"id": "Title-1",
			"size": 15,
			"text": "Chart Title"
		}
	],
	"dataProvider": [
		{
			"category": "TERCEIRO",
			"Faturamento": 36852926.31,
			"Quantidade de Carga": 4725,
			"Media": "7800.83"
		},
		{
			"category": "FROTA ASSOCIADO",
			"Faturamento": 45710305.72,
			"Quantidade de Carga": 2965,
			"Media": "15416.6"
		},
		{
			"category": "AGREGADO",
			"Faturamento": 25446043.96,
			"Quantidade de Carga": 2904,
			"Media": "8762.41"
		},
		{
			"category": "FROTA PRÓPRIA",
			"Faturamento": "21330662.68",
			"Quantidade de Carga": "2123",
			"Media": "10047.42"
		}
	]
}

```

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 22, 2023, 8:17pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/5 "2023-08-22T20:17:40Z")

</div>

Boa tarde, @daniel.giacomelli  
Neste exemplo que você citou, existiria alguma forma de trazer o valor da média de forma no gráfico, fixo como no Cargas e no Faturamento, sem ser somente com o cursor?  
Possivelmente não traz, porque o valor é menor em proporção ao faturamento, mas talvez tenha alguma maneira de retornar este dado.

 ![image](https://community.latromi.com.br/uploads/default/original/2X/0/009b2d6f9fdafafc506ade49ba38c5acabcfdf3a.png)

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Agosto 23, 2023, 12:59pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/6 "2023-08-23T12:59:22Z")

</div>

Bom dia @LindaBarichello.  
Até onde sei, os valores não são exibidos quando não cabem no gráfico.  
Mesmo se tivesse como mostrar, acho que ficara confuso.

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 23, 2023, 1:06pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/7 "2023-08-23T13:06:11Z")

</div>

Bom dia, certo, muito obrigada.

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 25, 2023, 4:47pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/8 "2023-08-25T16:47:09Z")

</div>

Boa tarde, Daniel, mais um dúvida.

Quero que os separadores de milhar seja o . e não a ,  
como esta apresentando a imagem abaixo

 ![image](https://community.latromi.com.br/uploads/default/original/2X/b/b8c07ecc2e555699ff1d2092155d47f17801f342.png)

Estou usando no comando estes itens

```json
{
   "decimalSeparator": ",",
   "percentPrecision": 2,
   "thousandsSeparator": ".",
   "precision": 3,
}

```

Poderias me auxiliar neste item ?

Fico no aguardo.

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Agosto 25, 2023, 5:00pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/9 "2023-08-25T17:00:36Z")

</div>

Olá @LindaBarichello  
Parece correto. Colocando esses valore no [https://live.amcharts.com/](https://live.amcharts.com/) funcionou como o esperado.

 ![image](https://community.latromi.com.br/uploads/default/original/2X/5/505524d27d7cfe9993ea8e77f5271d01819ce15b.png)

Por favor, compartilhe op código completo do gráfico novamente.

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 25, 2023, 6:19pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/10 "2023-08-25T18:19:44Z")

</div>

Boa tarde,  
Não, não funcionou, tentei colocando  
Inicialmente logo no Inicio

```plaintext
"type": "serial",
"categoryField": "category"

```

e dentro das informações das colunas, mas não funcionou, e a quantidade ficou com casas decimais e somente desejo isso para os itens Média e faturamento.

Minha ideia seria o separador de decimal com duas casas decimais no Faturamento e Média e o de milhar nesses casos também.  
No quantidade não quero casas decimais.

 ![image](https://community.latromi.com.br/uploads/default/original/2X/4/444b4ac1567be55c672d42b908612641b3dccc21.png)

Repliquei o comando que você inseriu antes incluindo os campos que mencionei

```json
{
	"type": "serial",
	"categoryField": "category",
	"startDuration": 1,
	"categoryAxis": {
		"gridPosition": "start"
	},
	"trendLines": [],
	"graphs": [
		{
			"balloonText": "[[title]] of [[category]]:[[value]]",
			"fillAlphas": 1,
			"fillColors": "#7DAC4D",
			"id": "AmGraph-2",
			"precision": 0,
			"title": "Quantidade de Cargas",
			"type": "column",
			"valueField": "Quantidade de Carga"
		},
		{
			"fillAlphas": 1,
			"id": "AmGraph-4",
			"maxBulletSize": 10000000,
			"minBulletSize": 2,
			 "decimalSeparator": ",",
                       "percentPrecision": 2,
                        "thousandsSeparator": ".",
                        "precision":3,
			"title": "Média",
			"type": "column",
			"valueField": "Media"
		},
		{
			"bullet": "round",
			"id": "AmGraph-1",
			"lineColor": "#C41E3A",
			"title": "graph 1",
			"type": "smoothedLine",
                        "decimalSeparator": ",",
                        "percentPrecision": 2,
                        "thousandsSeparator": ".",
                        "precision":3,
			"valueAxis": "Fat-Axis",
			"valueField": "Faturamento"
		}
	],
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"stackType": "regular",
			"title": "Axis title"
		},
		{
			"id": "Fat-Axis",
			"position": "right",
			"title": "Faturamento"
		}
	],
	"allLabels": [],
	"balloon": {},
	"legend": {
		"enabled": true,
		"useGraphSettings": true
	},
	"titles": [
		{
			"id": "Title-1",
			"size": 15,
			"text": "Chart Title"
		}
	],
	"dataProvider": [
		{
			"category": "TERCEIRO",
			"Faturamento": 36852926.31,
			"Quantidade de Carga": 4725,
			"Media": "7800.83"
		},
		{
			"category": "FROTA ASSOCIADO",
			"Faturamento": 45710305.72,
			"Quantidade de Carga": 2965,
			"Media": "15416.6"
		},
		{
			"category": "AGREGADO",
			"Faturamento": 25446043.96,
			"Quantidade de Carga": 2904,
			"Media": "8762.41"
		},
		{
			"category": "FROTA PRÓPRIA",
			"Faturamento": "21330662.68",
			"Quantidade de Carga": "2123",
			"Media": "10047.42"
		}
	]
}

```

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Agosto 25, 2023, 6:33pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/11 "2023-08-25T18:33:14Z")

</div>

Pelo meu entendimento, as configurações da seção “Number formatting” são aplicadas à todo o gráfico.

Se não especificar a precisão, ele mostra as decimais só quando elas existem:

 ![image](https://community.latromi.com.br/uploads/default/original/2X/6/6be41f1df192e37189625a38d0eaff683c782490.png)

```json
{
	"type": "serial",
	"categoryField": "category",
	"startDuration": 1,
	"decimalSeparator": ",",
	"thousandsSeparator": ".",
	"categoryAxis": {
		"gridPosition": "start"
	},
	"trendLines": [],
	"graphs": [
		{
			"balloonText": "[[title]] of [[category]]:[[value]]",
			"fillAlphas": 1,
			"fillColors": "#7DAC4D",
			"id": "AmGraph-2",
			"title": "Quantidade de Cargas",
			"type": "column",
			"valueField": "Quantidade de Carga"
		},
		{
			"fillAlphas": 1,
			"id": "AmGraph-4",
			"maxBulletSize": 10000000,
			"minBulletSize": 2,
			"title": "Média",
			"type": "column",
			"valueField": "Media"
		},
		{
			"bullet": "round",
			"id": "AmGraph-1",
			"lineColor": "#C41E3A",
			"title": "graph 1",
			"type": "smoothedLine",
			"valueAxis": "Fat-Axis",
			"valueField": "Faturamento"
		}
	],
	"guides": [],
	"valueAxes": [
		{
			"id": "ValueAxis-1",
			"stackType": "regular",
			"title": "Axis title"
		},
		{
			"id": "Fat-Axis",
			"position": "right",
			"title": "Faturamento"
		}
	],
	"allLabels": [],
	"balloon": {},
	"legend": {
		"enabled": true,
		"useGraphSettings": true
	},
	"titles": [
		{
			"id": "Title-1",
			"size": 15,
			"text": "Chart Title"
		}
	],
	"dataProvider": [
		{
			"category": "TERCEIRO",
			"Faturamento": 36852926.31,
			"Quantidade de Carga": 4725,
			"Media": "7800.83"
		},
		{
			"category": "FROTA ASSOCIADO",
			"Faturamento": 45710305.72,
			"Quantidade de Carga": 2965,
			"Media": "15416.6"
		},
		{
			"category": "AGREGADO",
			"Faturamento": 25446043.96,
			"Quantidade de Carga": 2904,
			"Media": "8762.41"
		},
		{
			"category": "FROTA PRÓPRIA",
			"Faturamento": "21330662.68",
			"Quantidade de Carga": "2123",
			"Media": "10047.42"
		}
	]
}

```

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 25, 2023, 6:46pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/12 "2023-08-25T18:46:30Z")

</div>

Funcionou corretamente, sem casas decimais na coluna de quantidade, obrigada.

---

<div class="post-metadata">

**Author:** ![LindaBarichello](https://community.latromi.com.br/user_avatar/community.latromi.com.br/lindabarichello/32/1583_2.png) [@LindaBarichello](https://community.latromi.com.br/u/LindaBarichello)\
**Post date:** [Agosto 31, 2023, 6:57pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/13 "2023-08-31T18:57:16Z")

</div>

Boa tarde, um dúvida com relação as formatações, procurei algumas documentações, mas infelizmente não solucionaram o que eu preciso.  
Existe alguma documentação sobre formatações, por exemplo incluir o símbolo de moeda R$, negrito, aumentar a fonte somente dos valores ?

Gostaria de melhorar a aparência do gráfico com alguns ajustes, como os citados acima, isto se ferramenta permitir essas ações.

Fico no aguardo, obrigada.

---

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Agosto 31, 2023, 7:35pm UTC](https://community.latromi.com.br/t/grafico-amcharts/1103/14 "2023-08-31T19:35:00Z")

</div>

Olá @LindaBarichello

Para adicionar o símbolo da moeda, basta usar o padrão de interpolação de texto do **amCharts**.

Por exemplo, para adicionar “R$” no balão que aparece ao passar o mouse por cima da coluna, basta informar o código abaixo no elemento correpondente ao gráfico (`graph`):

```json
"balloonText": "R$ [[value]]"

```

Quanto as outras customizações, talvez você consiga realizá-las estilizando os elementos do gráfico com CSS.

Esta página da documentação do **amCharts** aborda este assunto:

[https://www.amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/](https://www.amcharts.com/docs/v4/tutorials/chart-element-class-names-and-css/)