Chart.js é uma biblioteca que permite a criação de gráficos em JavaScript. É uma biblioteca simples, compatível com todos os browsers modernos. Existem 7 tipos de gráficos, todos responsivos. Os tipos de gráficos disponívels são bar(colunas), line(linha), radar, polarArea, pie(pizza), doughnut e bubble.

Não é necessário nenhuma dependência, basta adicionar o arquivo js na sua página e inserir um elemento canvas onde o gráfico vai ser renderizado.

Para baixar esta biblioteca, acesse este link:

Chart.JS

Depois de inserir na página, adicione um elemento canvas e atribua um ID. Neste exemplo, o ID vai se "grafico-linhas".

No final de sua página, adicione o seguinte código JavaScript:

var ctx = document.getElementById("grafico-linhas");

var chartGraph = new Chart(ctx, {

type: "line",

data: {

labels: ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],

datasets: [{

label:"Vendas de 2019",

data: [10, 15, 8, 5, 6, 9, 10, 7, 8, 11, 4, 5],

borderWidth: 6,

borderColor: "rgba(77,166,253,0.8)"

}]

}

})    

Na primeira linha, criamos uma variável chamada "ctx" com o conteudo do elemento canvas com o ID "grafico-linhas"

 Na linha seguinte, o gráfico foi criado utilizando a classe Chart, ela recebe dois parâmetros, o primeiro é onde o gráfico deve ser criado, e o segundo são as configurações.

 Nas configurações eu tenho o tipo de gráfico, e o objeto "data". Dentro do objeto data eu tenho as "labels", que são os rótulos das colunas, o "label" que seria o título da legenda das colunas, e o array data, com os dados de cada coluna. Além disso, eu tenho algumas configurações de formatação (bordas)

Outras opções de configuração você pode ver neste link:

Documentação

Aqui tem alguns exemplos, toda a programação está dentro do código-fonte do link a seguir:

Gráficos com Chart.JS