Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Consistent use of punctuation and quick review in docs #5796

Merged
merged 2 commits into from Nov 2, 2018
Merged

Consistent use of punctuation and quick review in docs #5796

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
194d4db
Consistent use of punctuation and quick review in docs
bartdeslagmulder Oct 27, 2018
cb54ab4
Fix PR feedback
bartdeslagmulder Nov 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/README.md
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@ You can download the latest version of Chart.js from the [GitHub releases](https

It's easy to get started with Chart.js. All that's required is the script included in your page along with a single `<canvas>` node to render the chart.

In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md)
In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the [usage documentation](./getting-started/usage.md).
```html
<canvas id="myChart" width="400" height="400"></canvas>
<script>
Expand Down
8 changes: 4 additions & 4 deletions docs/axes/README.md
View file
Open in desktop
Expand Up @@ -4,15 +4,15 @@ Axes are an integral part of a chart. They are used to determine how data maps t

In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/README.md#radial-axes).

Scales in Chart.js >V2.0 are significantly more powerful, but also different than those of v1.0.
Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0.
* Multiple X & Y axes are supported.
* A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
* Scale titles are supported
* New scale types can be extended without writing an entirely new chart type
* Scale titles are supported.
* New scale types can be extended without writing an entirely new chart type.

# Common Configuration

The following properties are common to all axes provided by Chart.js
The following properties are common to all axes provided by Chart.js.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
Expand Down
2 changes: 1 addition & 1 deletion docs/axes/cartesian/README.md
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@ The following options are common to all cartesian axes but do not apply to other

| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `autoSkip` | `Boolean` | `true` | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what
| `autoSkip` | `Boolean` | `true` | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what.
| `autoSkipPadding` | `Number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled. *Note: Only applicable to horizontal scales.*
| `labelOffset` | `Number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas*
| `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
Expand Down
8 changes: 4 additions & 4 deletions docs/axes/cartesian/time.md
View file
Open in desktop
Expand Up @@ -32,8 +32,8 @@ The following options are provided by the time scale. You may also set options p
| `ticks.source` | `String` | `auto` | How ticks are generated. [more...](#ticks-source)
| `time.displayFormats` | `Object` | | Sets how different time units are displayed. [more...](#display-formats)
| `time.isoWeekday` | `Boolean` | `false` | If true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
| `time.max` | [Time](#date-formats) | | If defined, this will override the data maximum
| `time.min` | [Time](#date-formats) | | If defined, this will override the data minimum
| `time.max` | [Time](#date-formats) | | If defined, this will override the data maximum.
| `time.min` | [Time](#date-formats) | | If defined, this will override the data minimum.
| `time.parser` | `String/Function` | | Custom parser for dates. [more...](#parser)
| `time.round` | `String` | `false` | If defined, dates will be rounded to the start of this unit. See [Time Units](#time-units) below for the allowed units.
| `time.tooltipFormat` | `String` | | The moment js format string to use for the tooltip.
Expand Down Expand Up @@ -134,14 +134,14 @@ var chart = new Chart(ctx, {

### Scale Bounds

The `bounds` property controls the scale boundary strategy (bypassed by min/max time options)
The `bounds` property controls the scale boundary strategy (bypassed by min/max time options):

* `'data'`: make sure data are fully visible, labels outside are removed
bartdeslagmulder marked this conversation as resolved.
Show resolved Hide resolved
* `'ticks'`: make sure ticks are fully visible, data outside are truncated

### Ticks Source

The `ticks.source` property controls the ticks generation
The `ticks.source` property controls the ticks generation:

* `'auto'`: generates "optimal" ticks based on scale size and time options.
* `'data'`: generates ticks from data (including labels from data `{t|x|y}` objects)
bartdeslagmulder marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
4 changes: 2 additions & 2 deletions docs/axes/labelling.md
View file
Open in desktop
Expand Up @@ -10,7 +10,7 @@ The scale label configuration is nested under the scale configuration in the `sc
| -----| ---- | --------| -----------
| `display` | `Boolean` | `false` | If true, display the axis title.
| `labelString` | `String` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height))
| `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
| `fontColor` | `Color` | `'#666'` | Font color for scale title.
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the scale title, follows CSS font-family options.
| `fontSize` | `Number` | `12` | Font size for scale title.
Expand All @@ -20,7 +20,7 @@ The scale label configuration is nested under the scale configuration in the `sc
## Creating Custom Tick Formats

It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the `ticks.callback` method in the axis configuration.
In the following example, every label of the Y axis would be displayed with a dollar sign at the front..
In the following example, every label of the Y axis would be displayed with a dollar sign at the front.

If the callback returns `null` or `undefined` the associated grid line will be hidden.

Expand Down
12 changes: 6 additions & 6 deletions docs/axes/radial/linear.md
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@ The following options are provided by the linear scale. They are all located in

| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops
| `backdropColor` | `Color` | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
| `backdropPaddingX` | `Number` | `2` | Horizontal padding of label backdrop.
| `backdropPaddingY` | `Number` | `2` | Vertical padding of label backdrop.
| `beginAtZero` | `Boolean` | `false` | if true, scale will include 0 if it is not already included.
Expand All @@ -31,7 +31,7 @@ The following options are provided by the linear scale. They are all located in
| `stepSize` | `Number` | | User defined fixed step size for the scale. [more...](#step-size)
| `suggestedMax` | `Number` | | Adjustment used when calculating the maximum data value. [more...](#axis-range-settings)
| `suggestedMin` | `Number` | | Adjustment used when calculating the minimum data value. [more...](#axis-range-settings)
| `showLabelBackdrop` | `Boolean` | `true` | If true, draw a background behind the tick labels
| `showLabelBackdrop` | `Boolean` | `true` | If true, draw a background behind the tick labels.

## Axis Range Settings

Expand Down Expand Up @@ -92,9 +92,9 @@ The following options are used to configure angled lines that radiate from the c

| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `display` | `Boolean` | `true` | if true, angle lines are shown
| `color` | `Color` | `rgba(0, 0, 0, 0.1)` | Color of angled lines
| `lineWidth` | `Number` | `1` | Width of angled lines
| `display` | `Boolean` | `true` | if true, angle lines are shown.
| `color` | `Color` | `rgba(0, 0, 0, 0.1)` | Color of angled lines.
| `lineWidth` | `Number` | `1` | Width of angled lines.

## Point Label Options

Expand All @@ -105,5 +105,5 @@ The following options are used to configure the point labels that are shown on t
| `callback` | `Function` | | Callback function to transform data labels to point labels. The default implementation simply returns the current string.
| `fontColor` | `Color/Color[]` | `'#666'` | Font color for point labels.
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family to use when rendering labels.
| `fontSize` | `Number` | 10 | font size in pixels
| `fontSize` | `Number` | 10 | font size in pixels.
| `fontStyle` | `String` | `'normal'` | Font style to use when rendering point labels.
12 changes: 6 additions & 6 deletions docs/axes/styling.md
View file
Open in desktop
Expand Up @@ -9,19 +9,19 @@ The grid line configuration is nested under the scale configuration in the `grid
| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `display` | `Boolean` | `true` | If false, do not display grid lines for this axis.
| `circular` | `Boolean` | `false` | If true, gridlines are circular (on radar chart only)
| `circular` | `Boolean` | `false` | If true, gridlines are circular (on radar chart only).
| `color` | `Color/Color[]` | `'rgba(0, 0, 0, 0.1)'` | The color of the grid lines. If specified as an array, the first color applies to the first grid line, the second to the second grid line and so on.
| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
| `borderDashOffset` | `Number` | `0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
| `borderDash` | `Number[]` | `[]` | Length and spacing of dashes on grid lines. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `borderDashOffset` | `Number` | `0` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `lineWidth` | `Number/Number[]` | `1` | Stroke width of grid lines.
| `drawBorder` | `Boolean` | `true` | If true, draw border at the edge between the axis and the chart area.
| `drawOnChartArea` | `Boolean` | `true` | If true, draw lines on the chart area inside the axis lines. This is useful when there are multiple axes and you need to control which grid lines are drawn.
| `drawTicks` | `Boolean` | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
| `tickMarkLength` | `Number` | `10` | Length in pixels that the grid lines will draw into the axis area.
| `zeroLineWidth` | `Number` | `1` | Stroke width of the grid line for the first index (index 0).
| `zeroLineColor` | Color | `'rgba(0, 0, 0, 0.25)'` | Stroke color of the grid line for the first index (index 0).
| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash)
| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
| `zeroLineBorderDash` | `Number[]` | `[]` | Length and spacing of dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash).
| `zeroLineBorderDashOffset` | `Number` | `0` | Offset for line dashes of the grid line for the first index (index 0). See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset).
| `offsetGridLines` | `Boolean` | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a category scale in a bar chart by default.

## Tick Configuration
Expand All @@ -30,7 +30,7 @@ The tick configuration is nested under the scale configuration in the `ticks` ke
| Name | Type | Default | Description
| -----| ---- | --------| -----------
| `callback` | `Function` | | Returns the string representation of the tick value as it should be displayed on the chart. See [callback](../axes/labelling.md#creating-custom-tick-formats).
| `display` | `Boolean` | `true` | If true, show tick marks
| `display` | `Boolean` | `true` | If true, show tick marks.
| `fontColor` | `Color` | `'#666'` | Font color for tick labels.
| `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the tick labels, follows CSS font-family options.
| `fontSize` | `Number` | `12` | Font size for the tick labels.
Expand Down
2 changes: 1 addition & 1 deletion docs/charts/README.md
View file
Open in desktop
Expand Up @@ -11,4 +11,4 @@ Chart.js comes with built-in chart types:

[Area charts](area.md) can be built from a line or radar chart using the dataset `fill` option.

To create a new chart type, see the [developer notes](../developers/charts.md#new-charts)
To create a new chart type, see the [developer notes](../developers/charts.md#new-charts).
2 changes: 1 addition & 1 deletion docs/charts/area.md
View file
Open in desktop
Expand Up @@ -35,7 +35,7 @@ new Chart(ctx, {
## Configuration
| Option | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| [`plugins.filler.propagate`](#propagate) | `Boolean` | `true` | Fill propagation when target is hidden
| [`plugins.filler.propagate`](#propagate) | `Boolean` | `true` | Fill propagation when target is hidden.

### propagate
Boolean (default: `true`)
Expand Down
8 changes: 4 additions & 4 deletions docs/charts/bar.md
View file
Open in desktop
Expand Up @@ -68,10 +68,10 @@ Some properties can be specified as an array. If these are set to an array value
| Name | Type | Description
| ---- | ---- | -----------
| `label` | `String` | The label for the dataset which appears in the legend and tooltips.
| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis
| `xAxisID` | `String` | The ID of the x axis to plot this dataset on. If not specified, this defaults to the ID of the first found x axis.
| `yAxisID` | `String` | The ID of the y axis to plot this dataset on. If not specified, this defaults to the ID of the first found y axis.
| `backgroundColor` | `Color/Color[]` | The fill color of the bar. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color/Color[]` | The color of the bar border. See [Colors](../general/colors.md#colors)
| `backgroundColor` | `Color/Color[]` | The fill color of the bar. See [Colors](../general/colors.md#colors).
| `borderColor` | `Color/Color[]` | The color of the bar border. See [Colors](../general/colors.md#colors).
| `borderWidth` | `Number/Number[]` | The stroke width of the bar in pixels.
| `borderSkipped` | `String` | Which edge to skip drawing the border for. [more...](#borderskipped)
| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered.
Expand Down Expand Up @@ -193,7 +193,7 @@ 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)
| `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
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.
Expand Down
22 changes: 11 additions & 11 deletions docs/charts/bubble.md
View file
Open in desktop
Expand Up @@ -64,12 +64,12 @@ The style of each bubble can be controlled with the following properties:

| Name | Description
| ---- | ----
| `backgroundColor` | bubble background color
| `borderColor` | bubble border color
| `borderWidth` | bubble border width (in pixels)
| `pointStyle` | bubble [shape style](../configuration/elements#point-styles)
| `rotation` | bubble rotation (in degrees)
| `radius` | bubble radius (in pixels)
| `backgroundColor` | bubble background color.
| `borderColor` | bubble border color.
| `borderWidth` | bubble border width (in pixels).
| `pointStyle` | bubble [shape style](../configuration/elements#point-styles).
| `rotation` | bubble rotation (in degrees).
| `radius` | bubble radius (in pixels).

All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.

Expand All @@ -79,11 +79,11 @@ The interaction with each bubble can be controlled with the following properties

| Name | Description
| ---- | -----------
| `hoverBackgroundColor` | bubble background color when hovered
| `hoverBorderColor` | bubble border color hovered
| `hoverBorderWidth` | bubble border width when hovered (in pixels)
| `hoverRadius` | bubble **additional** radius when hovered (in pixels)
| `hitRadius` | bubble **additional** radius for hit detection (in pixels)
| `hoverBackgroundColor` | bubble background color when hovered.
| `hoverBorderColor` | bubble border color hovered.
| `hoverBorderWidth` | bubble border width when hovered (in pixels).
| `hoverRadius` | bubble **additional** radius when hovered (in pixels).
| `hitRadius` | bubble **additional** radius for hit detection (in pixels).

All these values, if `undefined`, fallback to the associated [`elements.point.*`](../configuration/elements.md#point-configuration) options.

Expand Down
8 changes: 4 additions & 4 deletions docs/charts/doughnut.md
View file
Open in desktop
Expand Up @@ -55,8 +55,8 @@ The doughnut/pie chart allows a number of properties to be specified for each da

| Name | Type | Description
| ---- | ---- | -----------
| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors)
| `backgroundColor` | `Color[]` | The fill color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
| `borderColor` | `Color[]` | The border color of the arcs in the dataset. See [Colors](../general/colors.md#colors).
| `borderWidth` | `Number[]` | The border width of the arcs in the dataset.
| `hoverBackgroundColor` | `Color[]` | The fill colour of the arcs when hovered.
| `hoverBorderColor` | `Color[]` | The stroke colour of the arcs when hovered.
Expand All @@ -70,7 +70,7 @@ These are the customisation options specific to Pie & Doughnut charts. These opt
| ---- | ---- | ------- | -----------
| `cutoutPercentage` | `Number` | `50` - for doughnut, `0` - for pie | The percentage of the chart that is cut out of the middle.
| `rotation` | `Number` | `-0.5 * Math.PI` | Starting angle to draw arcs from.
| `circumference` | `Number` | `2 * Math.PI` | Sweep to allow arcs to cover
| `circumference` | `Number` | `2 * Math.PI` | Sweep to allow arcs to cover.
| `animation.animateRotate` | `Boolean` | `true` | If true, the chart will animate in with a rotation animation. This property is in the `options.animation` object.
| `animation.animateScale` | `Boolean` | `false` | If true, will animate scaling the chart from the center outwards.

Expand All @@ -82,7 +82,7 @@ We can also change these default values for each Doughnut type that is created,

For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.

You also need to specify an array of labels so that tooltips appear correctly
You also need to specify an array of labels so that tooltips appear correctly.

```javascript
data = {
Expand Down