Skip to main content

Respostas interessantes marcadas com a tag

4 votos
Aceito

Como adicionar legenda em um gráfico usando ChartJS?

Alterei apenas o final do seu código: Inclui o generateLegend() para gerar uma legenda na nova div que adicionei (legendDiv). Aqui você consegue ler sobre a documentação do chart JS V1. var ...
George Wurthmann's user avatar
4 votos
Aceito

Como alterar chart.js exibir c,

Você pode adicionar um para a escala tanto do eixo X como do eixo Y scales: { yAxes: [{ ticks: { max: 5, min: 0, stepSize: 1 } }] } Na ...
Dobrychtop's user avatar
4 votos
Aceito

Como usar Chart.Js com ASP.NET MVC

Uma forma simples de utilizar é utilizando o Chart.Mvc. Para utilizar este pacote, basta instalar via NuGet com o seguinte comando: Install-Package Chart.Mvc Após isso, faça algo parecido com ...
Randrade's user avatar
  • 21,9mil
4 votos
Aceito

Mais de um gráfico com Chart.js

$(function() { var optionsBar = { responsive: true, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } }; var dataBar = { ...
Diego Souza's user avatar
  • 16,7mil
3 votos
Aceito

Mudança de cor no gráfico com ChartJS não está funcionando

Altere os parâmetros de cor conforme indicado abaixo. E inclua uma função para conversão de cor Hexadecimal para RGBA. Inclui também a propriedade backgroundColor no dataset e foi. $(document)....
Alexandre Cavaloti's user avatar
3 votos
Aceito

Tem como desativar a animação do de um gráfico Charts.js?

Para desabilitar as animações passe no options a seguinte configuração: options: { animation: false }
Leandro Simões's user avatar
3 votos

Javascript: ChartJS - Como destacar "pedaço" do gráfico quando usuário clicar?

Consegui! Código funcionando function GraficoController($http, $element, $attrs) { var vm = this; vm.myLabels = []; vm.myValues = []; vm.myHoverColor = []; vm.myForteColor = []...
Andresa Prates's user avatar
3 votos
Aceito

Dar Foreach em label no Chartjs / Canvas - CodeIgniter

Ao invés de criar na mão a estrutura do array javascript, deixe json_encode() fazer isso pra você. Só crie a lista de nomes e deixe a função imprimir o array formatado: labels: <?php foreach ($...
Ricardo Moraleida's user avatar
3 votos
Aceito

Atualizar div com Javascript ou AngularJS - para IONIC

Vamos lá, Primeiro você esta na verdade instânciando duas controllers separadas do seu chartController, veja: <select ng-controller="chartController" ..."> <div id="charts" ng-controller="...
Giovane's user avatar
  • 2.059
3 votos
Aceito

Como fixar a porcentagem em cima do gráfico usando ChartJS?

Não precisa mudar nada no código do seu gráfico se quiser mostrar apenas quantidade, apenas inclua referência para o chartjs-plugin-datalabels.min.js. Mas como você precisa da porcentagem é ...
George Wurthmann's user avatar
3 votos
Aceito

Como passar o retorno(JSON) de uma requisição getJson dentro do data onde será os valores do gráfico?

Se você explicitamente necessita de dados do retorno do JSON, encapsule sua lógica "neste retorno": var widgetTechnologiesChart = function() { if ($('#kt_widget_technologies_chart').length ...
Lauro Moraes's user avatar
  • 3.990
3 votos
Aceito

Uncaught ReferenceError: Chart is not defined

Verifique qual versão do arquivo você baixou, no exemplo abaixo utilizei a versão 2.8.0 e funcionou corretamente: Veja aqui os arquivos https://cdnjs.com/libraries/Chart.js var ctx = document....
Marciano Machado's user avatar
2 votos
Aceito

Populando Chart.js com dados de requisição AJAX

Para renderizar novamente os gráficos, você só precisa chamar novamente a função gerarGraficos. Mas como você quer que seja renderizado com novos dados, as variáveis dataLine e dataBar precisam serem ...
relaxeaza's user avatar
  • 1.443
2 votos
Aceito

Line chart sendo populado somente com ultimo registro somente em while/php

Minha implementação para esse problema seguindo os mesmos comandos básicos descritos seria algo como: https://gist.github.com/wilcorrea/797500f5fed2f8e27bd8a6cf0c6d1e68 <?php // JS property ...
William Correa's user avatar
2 votos
Aceito

Cor números chartjs

O chartsjs possui uma série de atributos com funcionalidades especificas na questão de aparencia do objeto renderizado. Um exemplo para as 'labels' da legenda (retirada da própria documentação): var ...
AnthraxisBR's user avatar
  • 4.374
2 votos

Sobreposição de gráficos

Passei pelo mesmo problema. A solução foi que ao trocar os dados eu removia o canvas do DOM e inseria um novo canvas com os novos valores. Ai criei uma diretiva que encapsulava as diretivas do ...
Giovane's user avatar
  • 2.059
2 votos
Aceito

Como exibir valores do gráfico em chartJS sem mouseover?

Você pode user o eventos que o ChartJS disponibiliza. Por exemplo, para que o gráfico responda apenas a eventos de clique, você pode usar: options: { //Este gráfico não responderá ao ...
Netinho Santos's user avatar
2 votos

Como formatar valores monetários para ser exibido em formato brasileiro com chartjs

Para formatar dados no tooltip use Tooltip Callbacks tooltips: { callbacks: { label: (tooltipItem, data) => { //Format data }, }, Para acessar os valores do tooltip: data....
Netinho Santos's user avatar
1 voto

Como popular Gráfico ChartJS com VueJs e Axios?

Aconselho usar um pacote chama vue-chartjs https://vue-chartjs.org/ e criar wrappers em cima dele, caso você não queira usar, você pode criar uma variável booleana em data, chamada hasData: false e ...
Iago Cavalcante's user avatar
1 voto
Aceito

Retornar label escolhida ao clicar em alguma coluna do gráfico - Chart.Js

acho que a forma mais organizada seria assim, adicione a propriedade onClick no objeto options options:{ onClick: minhaFuncao } e crie a respectiva função: function minhaFuncao(event, array){ ...
Hebert Lima's user avatar
1 voto

ChartJs com dataset dinamico

Crie um vetor com as informações retornadas no banco e inclua o vetor nos parâmetros do dataset. var data[]; var valores[]; //data e valores virão do seu banco. this.barChart = new Chart(this....
jraspante's user avatar
  • 301
1 voto
Aceito

Melhorar visual de informações no Chart.js

Tente adicionar o beginAtZero na configuração de escalas no yAxes, na qual deixará explicito que a escala comece no zero. scales: { yAxes: [{ ticks: { beginAtZero: true ...
Alessandra_'s user avatar
1 voto
Aceito

Chart.js different color for negative/positive chart bars

Na realidade está tudo certo, só que o gráfico está começando a partir do valor mais baixo, tem uma opção para setar como 0 o valor minimo do eixo Y: options: { legend: { display: false ...
Lucas's user avatar
  • 844
1 voto
Aceito

Usando ChartsJS

Caro, o mais próximo que cheguei para atender sua necessidade, foi da forma abaixo. Não consegui torna-lo executavel aqui stackoverflow, porque gera erro. Mas você pode acessar em meu codepen.io/...
Mário Rodeghiero's user avatar
1 voto
Aceito

Chartsjs exportar PNG automaticamente

Apenas chame a função: downloadImage();, assim quando a página carregar ele executa a função sem a necessidade do click. Coloquei a função no seu JSFiddle, e mandei executar novamente o código e fez ...
Max Rogério's user avatar
1 voto

Chart.js não aparece

Pelo que estou vendo, o problema está no status_name_list, você não postou como está sendo preenchido esse array, aparece undefined quando o chart não encontra o nome da legenda para aquela parte do ...
Elvis Pesconi's user avatar
1 voto
Aceito

Chartjs - Inserir % no final de valor em tooltip

Feito. Baseado na documentação do ChartJS: A configuração do rótulo da ferramenta é aninhada abaixo da configuração da dica de ferramenta usando a chave de retorno de chamada. O tooltip tem as ...
Maurício Krüger's user avatar
1 voto
Aceito

Gráfico de minutos por horas com chart js

Consegui solucionar. Creio que o erro estava no formato da data ou no método de arredondamento. Segue abaixo o resultado. $(function() { drawCharts('real', true, true); }); function ...
Giovan Cruz's user avatar
1 voto

Sobreposição de gráfico no chartJS

Mude o escopo da variável graficoTotalAlunosPorTurma para global, e antes de criar uma nova instância de Chart, apague a anterior if(this.graficoTotalAlunosPorTurma){ this....
renanvm's user avatar
  • 3.947

Only top scored, non community-wiki answers of a minimum length are eligible