Graphing Library

I was looking for a Javascript library for creating graphs, but when I search for "Javascript graphs" only Chart.js comes up.
Perhaps this is the only choice.
https://www.chartjs.org/

install

As for installation, it seems to be usable if you download chart.umd.js from CDN and paste it as it is.
It seems that npm installation is also acceptable.

Terminal
npm install chart.js

Javascript
<script src="./chart.umd.js"></script>

treatment

It is easy to use.
Type.
For a bar chart, select bar, for a line chart select line, for a bar chart select line, for a line chart select bar.
line for a line chart, pie for a pie chart, and bar for a bar chart.
pie for a pie chart.
Also, there seems to be a donut and so on.

If you want the Y axis to start from 0, set beginAtZero: true in the options.

The sample is in English, but very clear.
https://www.chartjs.org/docs/latest/samples/information.html

html
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="./chart.umd.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

The other thing that could be used is Point Style, just add pointStyle and pointRadius to each data.
You don't use titles or animations.

JavaScript
{
    label: '2022',
    data: [140290,136994,138199,120693,120348,110854,116520,134441,125972],
    pointStyle: 'triangle',
    pointRadius: 6,
},

DEMO

The data was taken from the Ministry of Health, Labor and Welfare's Current Population Survey.
I read an article that the number of deaths has been increasing in the last year or so, and I wanted to check it out to see if it was true.
Indeed, there is a sudden increase in 2021, but it could be a slide from the decrease in 2020.
I will have to wait until the data for 2022 and beyond to find out, so I will try to follow up on this.

https://blog.c-blanc.com/demo/blog/9/y.html
https://blog.c-blanc.com/demo/blog/9/m.html

PROFILE

C:blanc: I am a freelance programmer.

COMMENT
Submitted. Comments will appear after approval.
あと150more characters

Chart.js for easy charting

Contents

Graphing Library

install

treatment

DEMO

PROFILE

COMMENT