mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-07 20:59: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

3.0 KiB

Raw Blame History

Linear Axis

The linear scale is used to chart numerical data. It can be placed on either the x or y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.

Configuration Options

Linear Axis specific options

Namespace: options.scales[scaleId]

Name	Type	Description
`beginAtZero`	`boolean`	if true, scale will include 0 if it is not already included.
`grace`	`number`\|`string`	Percentage (string ending with `%`) or amount (number) for added room in the scale range above and below data. more...

!!!include(axes/cartesian/_common.md)!!!

!!!include(axes/_common.md)!!!

Tick Configuration

Linear Axis specific tick options

Namespace: options.scales[scaleId].ticks

Name	Type	Default	Description
`count`	`number`	`undefined`	The number of ticks to generate. If specified, this overrides the automatic generation.
`format`	`object`		The `Intl.NumberFormat` options used by the default label formatter
`maxTicksLimit`	`number`	`11`	Maximum number of ticks and gridlines to show.
`precision`	`number`		if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
`stepSize`	`number`		User-defined fixed step size for the scale. more...

!!!include(axes/cartesian/_common_ticks.md)!!!

!!!include(axes/_common_ticks.md)!!!

Step Size

If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.

This example sets up a chart with a y axis that creates ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.

let options = {
    scales: {
        y: {
            max: 5,
            min: 0,
            ticks: {
                stepSize: 0.5
            }
        }
    }
};

Grace

If the value is string ending with %, its treat as percentage. If number, its treat as value. The value is added to the maximum data value and subtracted from the minimum data. This extends the scale range as if the data values were that much greater.

// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
  labels: ['Positive', 'Negative'],
  datasets: [{
    data: [100, -50],
    backgroundColor: 'rgb(255, 99, 132)'
  }],
};
// </block:setup>

// <block:config:0>
const config = {
  type: 'bar',
  data,
  options: {
    scales: {
      y: {
        type: 'linear',
        grace: '5%'
      }
    },
    plugins: {
      legend: false
    }
  }
};
// </block:config>

module.exports = {
  actions: [],
  config: config,
};

Internal data format

Internally, the linear scale uses numeric data

3.0 KiB Raw Blame History