Skip to content

Commit

Permalink
Update documentation of order (#6897)
Browse files Browse the repository at this point in the history
  • Loading branch information
kurkle authored and etimberg committed Jan 3, 2020
1 parent 03f65d4 commit 5d94cac
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 6 deletions.
2 changes: 1 addition & 1 deletion docs/charts/bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ the color of the bars is generally set this way.
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
| `xAxisID` | The ID of the x axis to plot this dataset on.
| `yAxisID` | The ID of the y axis to plot this dataset on.

Expand Down
2 changes: 1 addition & 1 deletion docs/charts/bubble.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ The bubble chart allows a number of properties to be specified for each dataset.
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset.
| `order` | The drawing order of dataset. Also affects order for tooltip and legend.

### Styling

Expand Down
2 changes: 1 addition & 1 deletion docs/charts/line.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ The line chart allows a number of properties to be specified for each dataset. T
| ---- | ----
| `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}`
| `label` | The label for the dataset which appears in the legend and tooltips.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip, and legend.
| `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend.
| `xAxisID` | The ID of the x axis to plot this dataset on.
| `yAxisID` | The ID of the y axis to plot this dataset on.

Expand Down
6 changes: 3 additions & 3 deletions docs/charts/mixed.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ At this point we have a chart rendering how we'd like. It's important to note th

## Drawing order

By default, datasets are drawn so that first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0`.
By default, datasets are drawn so that first one is top-most. This can be altered by specifying `order` option to datasets. `order` defaults to `0`. Note that this also affects stacking, legend and tooltip. So its essentially the same as reordering the datasets.

```javascript
var mixedChart = new Chart(ctx, {
Expand All @@ -81,13 +81,13 @@ var mixedChart = new Chart(ctx, {
label: 'Bar Dataset',
data: [10, 20, 30, 40],
// this dataset is drawn below
order: 1
order: 2
}, {
label: 'Line Dataset',
data: [10, 10, 10, 10],
type: 'line',
// this dataset is drawn on top
order: 2
order: 1
}],
labels: ['January', 'February', 'March', 'April']
},
Expand Down
6 changes: 6 additions & 0 deletions docs/configuration/legend.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
The chart legend displays data about the datasets that are appearing on the chart.

## Configuration options

The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.global.legend`.

| Name | Type | Default | Description
Expand All @@ -20,14 +21,18 @@ The legend configuration is passed into the `options.legend` namespace. The glob
| `textDirection` | `string` | canvas' default | This will force the text direction `'rtl'|'ltr` on the canvas for rendering the legend, regardless of the css specified on the canvas

## Position

Position of the legend. Options are:

* `'top'`
* `'left'`
* `'bottom'`
* `'right'`

## Align

Alignment of the legend. Options are:

* `'start'`
* `'center'`
* `'end'`
Expand Down Expand Up @@ -115,6 +120,7 @@ var chart = new Chart(ctx, {
It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object.

The default legend click handler is:

```javascript
function(e, legendItem) {
var index = legendItem.datasetIndex;
Expand Down

0 comments on commit 5d94cac

Please sign in to comment.