From: Jukka Kurkela Date: Fri, 3 Jan 2020 14:08:15 +0000 (+0200) Subject: Update documentation of `order` (#6897) X-Git-Tag: v3.0.0-alpha~167 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=5d94cacb91b96083485781f22d6b0dc44efaad9e;p=thirdparty%2FChart.js.git Update documentation of `order` (#6897) --- diff --git a/docs/charts/bar.md b/docs/charts/bar.md index a2a40b53c..ea84d45c4 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -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. diff --git a/docs/charts/bubble.md b/docs/charts/bubble.md index d3f6e281b..3ce77c928 100644 --- a/docs/charts/bubble.md +++ b/docs/charts/bubble.md @@ -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 diff --git a/docs/charts/line.md b/docs/charts/line.md index be45d6769..ac141b2e1 100644 --- a/docs/charts/line.md +++ b/docs/charts/line.md @@ -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. diff --git a/docs/charts/mixed.md b/docs/charts/mixed.md index 1bdf1fd64..f3b82d1ae 100644 --- a/docs/charts/mixed.md +++ b/docs/charts/mixed.md @@ -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, { @@ -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'] }, diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index e6ab285e7..bbfe362ef 100644 --- a/docs/configuration/legend.md +++ b/docs/configuration/legend.md @@ -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 @@ -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'` @@ -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;