Skip to content

Commit

Permalink
Update doc links. Convert more sections to use tables where appropriate
Browse files Browse the repository at this point in the history
  • Loading branch information
etimberg committed Mar 18, 2017
1 parent f9ca2b5 commit a0c48a9
Show file tree
Hide file tree
Showing 15 changed files with 80 additions and 236 deletions.
95 changes: 20 additions & 75 deletions docs/axes/README.md
Expand Up @@ -14,85 +14,30 @@ Scales in Chart.js >V2.0 are significantly more powerful, but also different tha

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

## display
**Type:** Boolean
**Default:** `true`
If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.

Every scale extends a core scale class with the following options:
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | `Boolean` | `true` | If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.
| `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#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.

### beforeUpdate
Callback called before the update process starts. Passed a single argument, the scale instance.

`beforeUpdate: function(scaleInstance)`

### beforeSetDimensions
Callback that runs before dimensions are set. Passed a single argument, the scale instance.

`beforeSetDimensions: function(scaleInstance)`

### afterSetDimensions
Callback that runs after dimensions are set. Passed a single argument, the scale instance.

`afterSetDimensions: function(scaleInstance)`

### beforeDataLimits
Callback that runs before data limits are determined. Passed a single argument, the scale instance.

`beforeDataLimits: function(scaleInstance)`

### afterDataLimits
Callback that runs after data limits are determined. Passed a single argument, the scale instance.

`afterDataLimits: function(scaleInstance)`

### beforeBuildTicks
Callback that runs before ticks are created. Passed a single argument, the scale instance.

`beforeBuildTicks: function(scaleInstance)`

### afterBuildTicks
Callback that runs after ticks are created. Useful for filtering ticks. Passed a single argument, the scale instance.

`afterBuildTicks: function(scaleInstance)`

### beforeTickToLabelConversion
Callback that runs before ticks are converted into strings. Passed a single argument, the scale instance.

`beforeTickToLabelConversion: function(scaleInstance)`

### afterTickToLabelConversion
Callback that runs after ticks are converted into strings. Passed a single argument, the scale instance.

`afterTickToLabelConversion: function(scaleInstance)`

### beforeCalculateTickRotation
Callback that runs before tick rotation is determined. Passed a single argument, the scale instance.

`beforeCalculateTickRotation: function(scaleInstance)`

### afterCalculateTickRotation
Callback that runs after tick rotation is determined. Passed a single argument, the scale instance.

`afterCalculateTickRotation: function(scaleInstance)`

### beforeFit
Callback that runs before the scale fits to the canvas. Passed a single argument, the scale instance.

`beforeFit: function(scaleInstance)`

### afterFit
Callback that runs after the scale fits to the canvas. Passed a single argument, the scale instance.

`afterFit: function(scaleInstance)`

### afterUpdate
Callback that runs at the end of the update process. Passed a single argument, the scale instance.

`afterUpdate: function(scaleInstance)`
| Name | Arguments | Description
| ---- | --------- | -----------
| `beforeUpdate` | `axis` | Callback called before the update process starts.
| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
| `afterSetDimensions` | `axis` | Callback that runs after dimensions are set.
| `beforeDataLimits` | `axis` | Callback that runs before data limits are determined.
| `afterDataLimits` | `axis` | Callback that runs after data limits are determined.
| `beforeBuildTicks` | `axis` | Callback that runs before ticks are created.
| `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
| `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
| `beforeCalculateTickRotation` | `axis` | Callback that runs before tick rotation is determined.
| `afterCalculateTickRotation` | `axis` | Callback that runs after tick rotation is determined.
| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
| `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

Expand Down
14 changes: 6 additions & 8 deletions docs/axes/radial/linear.md
Expand Up @@ -47,7 +47,7 @@ In this example, the largest positive value is 50, but the data maximum is expan

```javascript
let chart = new Chart(ctx, {
type: 'line',
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
Expand All @@ -56,13 +56,11 @@ let chart = new Chart(ctx, {
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: 50
suggestedMax: 100
}
}]
scale: {
ticks: {
suggestedMin: 50
suggestedMax: 100
}
}
}
});
Expand Down
8 changes: 4 additions & 4 deletions docs/charts/bar.md
Expand Up @@ -23,7 +23,7 @@ Some properties can be specified as an array. If these are set to an array value
| `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. See [below](#borderSkipped) for details.
| `borderSkipped` | `String` | Which edge to skip drawing the border for. [more...](#borderSkipped)
| `hoverBackgroundColor` | `Color/Color[]` | The fill colour of the bars when hovered.
| `hoverBorderColor` | `Color/Color[]` | The stroke colour of the bars when hovered.
| `hoverBorderWidth` | `Number/Number[]` | The stroke width of the bars when hovered.
Expand All @@ -43,11 +43,11 @@ The bar chart defines the following configuration options. These options are mer

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. [Read More](#bar-chart-barpercentage-vs-categorypercentage)
| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. [Read More](#bar-chart-barpercentage-vs-categorypercentage)
| `barPercentage` | `Number` | `0.9` | Percent (0-1) of the available width each bar should be within the category percentage. 1.0 will take the whole category width and put the bars right next to each other. [more...](#bar-chart-barpercentage-vs-categorypercentage)
| `categoryPercentage` | `Number` | `0.8` | Percent (0-1) of the available width (the space between the gridlines for small datasets) for each data-point to use for the bars. [more...](#bar-chart-barpercentage-vs-categorypercentage)
| `barThickness` | `Number` | | Manually set width of each bar in pixels. If not set, the bars are sized automatically using `barPercentage` and `categoryPercentage`;
| `maxBarThickness` | `Number` | | Set this to ensure that the automatically sized bars are not sized thicker than this. Only works if barThickness is not set (automatic sizing is enabled).
| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. If false, the grid line will go right down the middle of the bars. See [below](#offsetGridLines) for details.
| `gridLines.offsetGridLines` | `Boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. If false, the grid line will go right down the middle of the bars. [more...](#offsetGridLines)

### offsetGridLines
If true, the bars for a particular data point fall between the grid lines. If false, the grid line will go right down the middle of the bars. It is unlikely that this will ever need to be changed in practice. It exists more as a way to reuse the axis code by configuring the existing axis slightly differently.
Expand Down
6 changes: 3 additions & 3 deletions docs/charts/line.md
Expand Up @@ -28,14 +28,14 @@ All point* properties can be specified as an array. If these are set to an array
| `borderDashOffset` | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
| `borderCapStyle` | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
| `borderJoinStyle` | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
| `cubicInterpolationMode` | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. See [below](#cubicInterpolationMode) for more details.
| `fill` | `Boolean/String` | How to fill the area under the line. See [details](#fill) below.
| `cubicInterpolationMode` | `String` | Algorithm used to interpolate a smooth curve from the discrete data points. [more...](#cubicInterpolationMode)
| `fill` | `Boolean/String` | How to fill the area under the line. [more...](#fill)
| `lineTension` | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines. This option is ignored if monotone cubic interpolation is used.
| `pointBackgroundColor` | `Color/Color[]` | The fill color for points.
| `pointBorderColor` | `Color/Color[]` | The border color for points.
| `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
| `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. See [details](#pointStyle) below.
| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](#pointStyle)
| `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.
| `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.
Expand Down
4 changes: 2 additions & 2 deletions docs/charts/radar.md
Expand Up @@ -28,13 +28,13 @@ All point* properties can be specified as an array. If these are set to an array
| `borderDashOffset` | `Number` | Offset for line dashes. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset)
| `borderCapStyle` | `String` | Cap style of the line. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap)
| `borderJoinStyle` | `String` | Line joint style. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin)
| `fill` | `Boolean/String` | How to fill the area under the line. See [details](#fill) below.
| `fill` | `Boolean/String` | How to fill the area under the line. [more...](#fill)
| `lineTension` | `Number` | Bezier curve tension of the line. Set to 0 to draw straightlines.
| `pointBackgroundColor` | `Color/Color[]` | The fill color for points.
| `pointBorderColor` | `Color/Color[]` | The border color for points.
| `pointBorderWidth` | `Number/Number[]` | The width of the point border in pixels.
| `pointRadius` | `Number/Number[]` | The radius of the point shape. If set to 0, the point is not rendered.
| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. See [details](#pointStyle) below.
| `pointStyle` | `String/String[]/Image/Image[]` | Style of the point. [more...](#pointStyle)
| `pointHitRadius` | `Number/Number[]` | The pixel size of the non-displayed point that reacts to mouse events.
| `pointHoverBackgroundColor` | `Color/Color[]` | Point background color when hovered.
| `pointHoverBorderColor` | `Color/Color[]` | Point border color when hovered.
Expand Down
2 changes: 1 addition & 1 deletion docs/configuration/elements.md
@@ -1,6 +1,6 @@
# Elements

While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc)**, **[lines](#lines)**, **[points](#points)**, and **[rectangles](#rectangles)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
While chart types provide settings to configure the styling of each dataset, you sometimes want to style **all datasets the same way**. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dataset. Options can be configured for four different types of elements: **[arc](#arc-configuration)**, **[lines](#line-configuration)**, **[points](#point-configuration)**, and **[rectangles](#rectangle-configuration)**. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

## Global Configuration

Expand Down
62 changes: 16 additions & 46 deletions docs/configuration/tooltip.md
Expand Up @@ -64,33 +64,22 @@ The tooltip label configuration is nested below the tooltip configuration using

All functions are called with the same arguments: a [tooltip item](#chart-configuration-tooltip-item-interface) and the data object passed to the chart. All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

### beforeTitle
**Arguments:** `Array[tooltipItem], data`
Returns the text to render before the title.

### title
**Arguments:** `Array[tooltipItem], data`
Returns text to render as the title of the tooltip.

### afterTitle
**Arguments:** `Array[tooltipItem], data`
Returns text to render after the title.

### beforeBody
**Arguments:** `Array[tooltipItem], data`
Returns text to render before the body section.

### beforeLabel
**Arguments:** `tooltipItem, data`
Returns text to render before an individual label. This will be called for each item in the tooltip.

### label
**Arguments:** `tooltipItem, data`
Returns text to render for an individual item in the tooltip.

### labelColor
**Arguments:** `tooltipItem, chart`
Returns the colors to render for the tooltip item. Return as an object containing two parameters: `borderColor` and `backgroundColor`.
| Name | Arguments | Description
| ---- | --------- | -----------
| `beforeTitle` | `Array[tooltipItem], data` | Returns the text to render before the title.
| `title` | `Array[tooltipItem], data` | Returns text to render as the title of the tooltip.
| `afterTitle` | `Array[tooltipItem], data` | Returns text to render after the title.
| `beforeBody` | `Array[tooltipItem], data` | Returns text to render before the body section.
| `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip.
| `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip.
| `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
| `afterLabel` | `tooltipItem, data` | Returns text to render after an individual label.
| `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section
| `beforeFooter` | `Array[tooltipItem], data` | Returns text to render before the footer section.
| `footer` | `Array[tooltipItem], data` | Returns text to render as the footer of the tooltip.
| `afterFooter` | `Array[tooltipItem], data` | Text to render after the footer section

### Label Color Callback

For example, to return a red box for each item in the tooltip you could do:
```javascript
Expand All @@ -112,25 +101,6 @@ var chart = new Chart(ctx, {
});
```

### afterLabel
**Arguments:** `tooltipItem, data`
Returns text to render after an individual label.

### afterBody
**Arguments:** `Array[tooltipItem], data`
Returns text to render after the body section

### beforeFooter
**Arguments:** `Array[tooltipItem], data`
Returns text to render before the footer section.

### footer
**Arguments:** `Array[tooltipItem], data`
Returns text to render as the footer of the tooltip.

### afterFooter
**Arguments:** `Array[tooltipItem], data`
Text to render after the footer section

### Tooltip Item Interface

Expand Down
4 changes: 2 additions & 2 deletions docs/developers/README.md
Expand Up @@ -5,9 +5,9 @@ Developer features allow extending and enhancing Chart.js in many different ways

Chart.js offers support for all browsers where canvas is supported.

Browser support for the canvas element is available in all modern & major mobile browsers <a href="http://caniuse.com/#feat=canvas" target="_blank">(http://caniuse.com/#feat=canvas)</a>.
Browser support for the canvas element is available in all modern & major mobile browsers. [CanIUse](http://caniuse.com/#feat=canvas)

Thanks to <a href="https://browserstack.com" target="_blank">BrowserStack</a> for allowing our team to test on thousands of browsers.
Thanks to [BrowserStack](https://browserstack.com) for allowing our team to test on thousands of browsers.

# Previous versions

Expand Down
2 changes: 1 addition & 1 deletion docs/developers/plugins.md
@@ -1,6 +1,6 @@
# Plugins

Plugins are the most efficient way to customize or change the default behavior of a chart. They have been introduced at [version 2.1.0](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (global plugins only) and extended at [version 2.5.0](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (per chart plugins and options).
Plugins are the most efficient way to customize or change the default behavior of a chart. They have been introduced at [version 2.1.0](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (global plugins only) and extended at [version 2.5.0](https://github.com/chartjs/Chart.js/releases/tag/2.5.0) (per chart plugins and options).

## Popular Plugins

Expand Down
2 changes: 1 addition & 1 deletion docs/general/colors.md
Expand Up @@ -6,7 +6,7 @@ You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/We

## Patterns and Gradients

An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient[(https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour.
An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour.

For example, if you wanted to fill a dataset with a pattern from an image you could do the following.

Expand Down
25 changes: 6 additions & 19 deletions docs/general/fonts.md
Expand Up @@ -20,22 +20,9 @@ let chart = new Chart(ctx, {
});
```

## defaultFontColor
**Type:** Color
**Default:** `'#666'`
Default font color for all text.

## defaultFontFamily
**Type:** String
**Default:** `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`
Default font family for all text.

## defaultFontSize
**Type:** Number
**Default:** `12`
Default font size (in px) for text. Does not apply to radialLinear scale point labels.

## defaultFontStyle
**Type:** String
**Default:** `'normal'`
Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `defaultFontColor` | `Color` | `'#666'` | Default font color for all text.
| `defaultFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
| `defaultFontSize` | `Number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
| `defaultFontStyle` | `String` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.

0 comments on commit a0c48a9

Please sign in to comment.