mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00

Switch docs to Vuepress to match other chart.js repositories (#8751 )

* Initial work

* Update doc commands

* Updated sidebar config

* Move docs

* Update theme version and enable

* Convert to chart.js sample

* Update scripts to point to local build

* Chart.js from local build

* Simplify getting-started example

* Axis docs updated except for imported content

* Common ticks import works

* Chart type docs ported to editor plugin

* Last pages to use editor

* Fix small errors

* Frontmatter title to heading

* Remove duplicate example

* Update sidebar

* Add paths

* Remove paths

* Add getting-started back

* Update menus and add copyright to license section of the docs

* Add GA plugin

* Style sub-groups

* Remove unneeded license page since it is covered on the main page

* Remove docusaurus readme page

* Remove docusaurus files

* Fix issues in docs

* Build and deploy scripts for docs work

* Conditional base URL for nice local testing

* Use eslint-plugin-markdown

* Remove hard coded lines

* Remove mentions of docusaurus

Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>

2021-03-30 10:32:39 -04:00

1.9 KiB

Raw Blame History

Usage

Chart.js can be used with ES6 modules, plain JavaScript, and module loaders.

Creating a Chart

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.

<canvas id="myChart" width="400" height="400"></canvas>

// Any of the following formats may be used
var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';

Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!

The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var 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],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

1.9 KiB Raw Blame History

Usage

Creating a Chart

1.9 KiB

Raw Blame History