diff --git a/docs/axes/README.md b/docs/axes/README.md index 5761603ba31..4c79922d7dd 100644 --- a/docs/axes/README.md +++ b/docs/axes/README.md @@ -10,7 +10,7 @@ Scales in Chart.js >v2.0 are significantly more powerful, but also different tha * Scale titles are supported. * New scale types can be extended without writing an entirely new chart type. -# Common Configuration +## Common Configuration The following properties are common to all axes provided by Chart.js. @@ -20,7 +20,7 @@ The following properties are common to all axes provided by Chart.js. | `callbacks` | `object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks) | `weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area. -## Callbacks +### Callbacks There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process. | Name | Arguments | Description @@ -40,7 +40,7 @@ There are a number of config callbacks that can be used to change parameters in | `afterFit` | `axis` | Callback that runs after the scale fits to the canvas. | `afterUpdate` | `axis` | Callback that runs at the end of the update process. -## Updating Axis Defaults +### Updating Axis Defaults The default configuration for a scale can be easily changed using the scale service. All you need to do is to pass in a partial configuration that will be merged with the current scale default configuration to form the new default. diff --git a/docs/axes/cartesian/README.md b/docs/axes/cartesian/README.md index a12245a44bc..97d2eac1182 100644 --- a/docs/axes/cartesian/README.md +++ b/docs/axes/cartesian/README.md @@ -7,7 +7,7 @@ Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes * [category](./category.md#category-cartesian-axis) * [time](./time.md#time-cartesian-axis) -# Common Configuration +## Common Configuration All of the included cartesian axes support a number of common options. @@ -21,7 +21,7 @@ All of the included cartesian axes support a number of common options. | `scaleLabel` | `object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration) | `ticks` | `object` | | Tick configuration. [more...](#tick-configuration) -## Tick Configuration +### Tick Configuration The following options are common to all cartesian axes but do not apply to other axes. | Name | Type | Default | Description @@ -34,7 +34,7 @@ The following options are common to all cartesian axes but do not apply to other | `mirror` | `boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.* | `padding` | `number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction. -## Axis ID +### Axis ID The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used. ```javascript @@ -63,7 +63,7 @@ var myChart = new Chart(ctx, { }); ``` -# Creating Multiple Axes +## Creating Multiple Axes With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the `xAxes` and `yAxes` properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are **not** used in this case. diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 88e2744c713..3f6e5cdd202 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -206,7 +206,7 @@ You can also specify the dataset as x/y coordinates when using the [time scale]( data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}] ``` -# Stacked Bar Chart +## Stacked Bar Chart Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces. @@ -227,15 +227,13 @@ var stackedBar = new Chart(ctx, { }); ``` -## Dataset Properties - The following dataset properties are specific to stacked bar charts. | Name | Type | Description | ---- | ---- | ----------- | `stack` | `string` | The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). -# Horizontal Bar Chart +## Horizontal Bar Chart A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. {% chartjs %} { @@ -288,7 +286,7 @@ var myBarChart = new Chart(ctx, { }); ``` -## Config Options +### Config Options The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart. The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`. diff --git a/docs/charts/line.md b/docs/charts/line.md index f7744eedbb6..51899fbe433 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -190,7 +190,7 @@ data: [{ This alternate is used for sparse datasets, such as those in [scatter charts](./scatter.md#scatter-chart). Each data point is specified using an object containing `x` and `y` properties. -# Stacked Area Chart +## Stacked Area Chart Line charts can be configured into stacked area charts by changing the settings on the y axis to enable stacking. Stacked area charts can be used to show how one data trend is made up of a number of smaller pieces. @@ -208,17 +208,17 @@ var stackedLine = new Chart(ctx, { }); ``` -# High Performance Line Charts +## High Performance Line Charts When charting a lot of data, the chart render time may start to get quite large. In that case, the following strategies can be used to improve performance. -## Data Decimation +### Data Decimation Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide. There are many approaches to data decimation and selection of an algorithm will depend on your data and the results you want to achieve. For instance, [min/max](https://digital.ni.com/public.nsf/allkb/F694FFEEA0ACF282862576020075F784) decimation will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks. -## Disable Bezier Curves +### Disable Bezier Curves If you are drawing lines on your chart, disabling bezier curves will improve render times since drawing a straight line is more performant than a bezier curve. @@ -238,7 +238,7 @@ new Chart(ctx, { }); ``` -## Disable Line Drawing +### Disable Line Drawing If you have a lot of data points, it can be more performant to disable rendering of the line for a dataset and only draw points. Doing this means that there is less to draw on the canvas which will improve render performance. @@ -258,7 +258,7 @@ new Chart(ctx, { }); ``` -## Disable Animations +### Disable Animations If your charts have long render times, it is a good idea to disable animations. Doing so will mean that the chart needs to only be rendered once during an update instead of multiple times. This will have the effect of reducing CPU usage and improving general page performance. diff --git a/docs/developers/README.md b/docs/developers/README.md index 669062c351d..6cbe569de22 100644 --- a/docs/developers/README.md +++ b/docs/developers/README.md @@ -2,14 +2,14 @@ Developer features allow extending and enhancing Chart.js in many different ways. -# Latest resources +## Latest resources Latest documentation and samples, including unreleased features, are available at: - https://www.chartjs.org/docs/master/ - https://www.chartjs.org/samples/master/ -# Development releases +## Development releases Latest builds are available for testing at: @@ -20,7 +20,7 @@ Latest builds are available for testing at: **WARNING: Development builds MUST not be used for production purposes or as replacement for CDN.** -# Browser support +## Browser support Chart.js offers support for the following browsers: * Chrome 50+ @@ -33,7 +33,7 @@ Browser support for the canvas element is available in all modern & major mobile Thanks to [BrowserStack](https://browserstack.com) for allowing our team to test on thousands of browsers. -# Previous versions +## Previous versions Version 2 has a completely different API than earlier versions. diff --git a/docs/developers/contributing.md b/docs/developers/contributing.md index ca849a96ff3..71cb5533793 100644 --- a/docs/developers/contributing.md +++ b/docs/developers/contributing.md @@ -9,11 +9,11 @@ New contributions to the library are welcome, but we ask that you please follow - Avoid breaking changes unless there is an upcoming major release, which are infrequent. We encourage people to write plugins for most new advanced features, and care a lot about backwards compatibility. - We strongly prefer new methods to be added as private whenever possible. A method can be made private either by making a top-level `function` outside of a class or by prefixing it with `_` and adding `@private` JSDoc if inside a class. Public APIs take considerable time to review and become locked once implemented as we have limited ability to change them without breaking backwards compatibility. Private APIs allow the flexibility to address unforeseen cases. -# Joining the project +## Joining the project Active committers and contributors are invited to introduce yourself and request commit access to this project. We have a very active Slack community that you can join [here](https://chartjs-slack.herokuapp.com/). If you think you can help, we'd love to have you! -# Building and Testing +## Building and Testing Chart.js uses gulp to build the library into a single JavaScript file. @@ -42,7 +42,7 @@ The following commands are now available from the repository root: More information can be found in [gulpfile.js](https://github.com/chartjs/Chart.js/blob/master/gulpfile.js). -# Bugs and Issues +## Bugs and Issues Please report these on the GitHub page - at github.com/chartjs/Chart.js. Please do not use issues for support requests. For help using Chart.js, please take a look at the [`chartjs`](https://stackoverflow.com/questions/tagged/chartjs) tag on Stack Overflow. diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md index 783bd13109c..9997ef0ea92 100644 --- a/docs/getting-started/installation.md +++ b/docs/getting-started/installation.md @@ -1,7 +1,10 @@ # Installation + +## Package Manager + Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way. -## npm +### npm [![npm](https://img.shields.io/npm/v/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js) [![npm](https://img.shields.io/npm/dm/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js) @@ -9,7 +12,7 @@ Chart.js can be installed via npm or bower. It is recommended to get Chart.js th npm install chart.js --save ``` -## Bower +### Bower [![bower](https://img.shields.io/bower/v/chartjs.svg?style=flat-square&maxAge=600)](https://libraries.io/bower/chartjs) ```bash @@ -17,41 +20,46 @@ bower install chart.js --save ``` ## CDN -### CDNJS + +### Selecting the Correct Build + +Chart.js provides two different builds for you to choose: **Stand-Alone Build**, **Bundled Build**. + +#### Stand-Alone Build +Files: +* `dist/Chart.js` +* `dist/Chart.min.js` + +The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](https://momentjs.com/) before Chart.js for the functionality of the time axis. + +#### Bundled Build +Files: +* `dist/Chart.bundle.js` +* `dist/Chart.bundle.min.js` + +The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually. + +### CDNs + +Chart.js is available on the following CDNs + +#### CDNJS [![cdnjs](https://img.shields.io/cdnjs/v/Chart.js.svg?style=flat-square&maxAge=600)](https://cdnjs.com/libraries/Chart.js) Chart.js built files are available on [CDNJS](https://cdnjs.com/): https://cdnjs.com/libraries/Chart.js -### jsDelivr +#### jsDelivr [![jsdelivr](https://img.shields.io/npm/v/chart.js.svg?label=jsdelivr&style=flat-square&maxAge=600)](https://cdn.jsdelivr.net/npm/chart.js@latest/dist/) [![jsdelivr hits](https://data.jsdelivr.com/v1/package/npm/chart.js/badge)](https://www.jsdelivr.com/package/npm/chart.js) Chart.js built files are also available through [jsDelivr](https://www.jsdelivr.com/): https://www.jsdelivr.com/package/npm/chart.js?path=dist -## Github +#### Github [![github](https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://github.com/chartjs/Chart.js/releases/latest) You can download the latest version of [Chart.js on GitHub](https://github.com/chartjs/Chart.js/releases/latest). If you download or clone the repository, you must [build](../developers/contributing.md#building-and-testing) Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is **strongly** advised. - -# Selecting the Correct Build - -Chart.js provides two different builds for you to choose: **Stand-Alone Build**, **Bundled Build**. - -## Stand-Alone Build -Files: -* `dist/Chart.js` -* `dist/Chart.min.js` - -The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](https://momentjs.com/) before Chart.js for the functionality of the time axis. - -## Bundled Build -Files: -* `dist/Chart.bundle.js` -* `dist/Chart.bundle.min.js` - -The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.