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

Changed var to const/let in the docs #9743

Closed
wants to merge 4 commits into from
Closed

Changed var to const/let in the docs #9743

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9e2c13b
Changed var to const/let in the docs
Prashoon123 Oct 8, 2021
fd996ce
Changed var to const/let in the docs
Prashoon123 Oct 8, 2021
6ce2763
Merge branch 'master'
Prashoon123 Oct 8, 2021
a2413e5
made the nescessary changes
Prashoon123 Oct 8, 2021
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
272 changes: 174 additions & 98 deletions docs/axes/cartesian/index.md
View file
Open in desktop

Large diffs are not rendered by default.

114 changes: 74 additions & 40 deletions docs/axes/cartesian/time.md
View file
Open in desktop
Expand Up @@ -22,42 +22,46 @@ When providing data for the time scale, Chart.js uses timestamps defined as mill

Namespace: `options.scales[scaleId]`

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `adapters.date` | `object` | `{}` | Options for adapter for external date library if that adapter needs or supports options
| `bounds` | `string` | `'data'` | Determines the scale bounds. [more...](./index.md#scale-bounds)
| `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`\|`number` | `false` | If `boolean` and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday. If `number`, the index of the first day of the week (0 - Sunday, 6 - Saturday)
| `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 format string to use for the tooltip.
| `time.unit` | `string` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details.
| `time.stepSize` | `number` | `1` | The number of units between grid lines.
| `time.minUnit` | `string` | `'millisecond'` | The minimum display format to be used for a time unit.

!!!include(axes/cartesian/_common.md)!!!

!!!include(axes/_common.md)!!!
| Name | Type | Default | Description |
| --------------------- | -------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `adapters.date` | `object` | `{}` | Options for adapter for external date library if that adapter needs or supports options |
| `bounds` | `string` | `'data'` | Determines the scale bounds. [more...](./index.md#scale-bounds) |
| `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`\|`number` | `false` | If `boolean` and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday. If `number`, the index of the first day of the week (0 - Sunday, 6 - Saturday) |
| `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 format string to use for the tooltip. |
| `time.unit` | `string` | `false` | If defined, will force the unit to be a certain type. See [Time Units](#time-units) section below for details. |
| `time.stepSize` | `number` | `1` | The number of units between grid lines. |
| `time.minUnit` | `string` | `'millisecond'` | The minimum display format to be used for a time unit. |

!!!include(axes/cartesian/\_common.md)!!!

!!!include(axes/\_common.md)!!!

#### Time Units

The following time measurements are supported. The names can be passed as strings to the `time.unit` config option to force a certain unit.

* `'millisecond'`
* `'second'`
* `'minute'`
* `'hour'`
* `'day'`
* `'week'`
* `'month'`
* `'quarter'`
* `'year'`
- `'millisecond'`
- `'second'`
- `'minute'`
- `'hour'`
- `'day'`
- `'week'`
- `'month'`
- `'quarter'`
- `'year'`

For example, to create a chart with a time scale that always displayed units per month, the following config could be used.

```javascript
var chart = new Chart(ctx, {
const chart = new Chart(ctx, {
<<<<<<< Updated upstream
<<<<<<< HEAD
=======
>>>>>>> Stashed changes
type: 'line',
data: data,
options: {
Expand All @@ -68,31 +72,47 @@ var chart = new Chart(ctx, {
unit: 'month'
}
}
=======
type: "line",
data: data,
options: {
scales: {
x: {
type: "time",
time: {
unit: "month"
>>>>>>> 9e2c13b9b99a77009b14a7e73eb303ae5aa1b086
}
}
}
}
});
```

#### Display Formats

You may specify a map of display formats with a key for each unit:

* `millisecond`
* `second`
* `minute`
* `hour`
* `day`
* `week`
* `month`
* `quarter`
* `year`
- `millisecond`
- `second`
- `minute`
- `hour`
- `day`
- `week`
- `month`
- `quarter`
- `year`

The format string used as a value depends on the date adapter you chose to use.

For example, to set the display format for the `quarter` unit to show the month and year, the following config might be passed to the chart constructor.

```javascript
var chart = new Chart(ctx, {
const chart = new Chart(ctx, {
<<<<<<< Updated upstream
<<<<<<< HEAD
=======
>>>>>>> Stashed changes
type: 'line',
data: data,
options: {
Expand All @@ -105,18 +125,32 @@ var chart = new Chart(ctx, {
}
}
}
=======
type: "line",
data: data,
options: {
scales: {
x: {
type: "time",
time: {
displayFormats: {
quarter: "MMM YYYY"
}
>>>>>>> 9e2c13b9b99a77009b14a7e73eb303ae5aa1b086
}
}
}
}
});
```

#### Ticks Source

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 `{x|y}` objects)
* `'labels'`: generates ticks from user given `labels` ONLY
- `'auto'`: generates "optimal" ticks based on scale size and time options
- `'data'`: generates ticks from data (including labels from data `{x|y}` objects)
- `'labels'`: generates ticks from user given `labels` ONLY

#### Parser

Expand Down
16 changes: 15 additions & 1 deletion docs/axes/cartesian/timeseries.md
View file
Open in desktop
Expand Up @@ -5,7 +5,11 @@ The time series scale extends from the time scale and supports all the same opti
## Example

```javascript
var chart = new Chart(ctx, {
const chart = new Chart(ctx, {
<<<<<<< Updated upstream
<<<<<<< HEAD
=======
>>>>>>> Stashed changes
type: 'line',
data: data,
options: {
Expand All @@ -14,7 +18,17 @@ var chart = new Chart(ctx, {
type: 'timeseries',
}
}
=======
type: "line",
data: data,
options: {
scales: {
x: {
type: "timeseries"
}
>>>>>>> 9e2c13b9b99a77009b14a7e73eb303ae5aa1b086
}
}
});
```

Expand Down
46 changes: 32 additions & 14 deletions docs/axes/labelling.md
View file
Open in desktop
Expand Up @@ -6,25 +6,25 @@ When creating a chart, you want to tell the viewer what data they are viewing. T

Namespace: `options.scales[scaleId].title`, it defines options for the scale title. Note that this only applies to cartesian axes.

| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `display` | `boolean` | `false` | If true, display the axis title.
| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'`
| `text` | `string`\|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label.
| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md)
| `padding` | [`Padding`](../general/padding.md) | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
| Name | Type | Default | Description |
| --------- | ---------------------------------- | ---------------------- | ----------------------------------------------------------------------------------- |
| `display` | `boolean` | `false` | If true, display the axis title. |
| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'` |
| `text` | `string`\|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices"). |
| `color` | [`Color`](../general/colors.md) | `Chart.defaults.color` | Color of label. |
| `font` | `Font` | `Chart.defaults.font` | See [Fonts](../general/fonts.md) |
| `padding` | [`Padding`](../general/padding.md) | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented. |

## 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 ('$').
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.

The method receives 3 arguments:

* `value` - the tick value in the **internal data format** of the associated scale.
* `index` - the tick index in the ticks array.
* `ticks` - the array containing all of the [tick objects](../api/interfaces/Tick).
- `value` - the tick value in the **internal data format** of the associated scale.
- `index` - the tick index in the ticks array.
- `ticks` - the array containing all of the [tick objects](../api/interfaces/Tick).

The call to the method is scoped to the scale. `this` inside the method is the scale object.

Expand All @@ -37,7 +37,11 @@ The [category axis](../axes/cartesian/category), which is the default x-axis for
In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.

```javascript
var chart = new Chart(ctx, {
const chart = new Chart(ctx, {
<<<<<<< Updated upstream
<<<<<<< HEAD
=======
>>>>>>> Stashed changes
type: 'line',
data: data,
options: {
Expand All @@ -50,11 +54,25 @@ var chart = new Chart(ctx, {
}
}
}
=======
type: "line",
data: data,
options: {
scales: {
y: {
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return "$" + value;
}
>>>>>>> 9e2c13b9b99a77009b14a7e73eb303ae5aa1b086
}
}
}
}
});
```

Related samples:

* [Tick configuration sample](../samples/scale-options/ticks)
- [Tick configuration sample](../samples/scale-options/ticks)