* [Usage](getting-started/usage.md)
* [Migration Guide](getting-started/v3-migration.md)
* [General](general/README.md)
+ * [Data structures](general/data-structures.md)
* [Accessibility](general/accessibility.md)
* [Responsive](general/responsive.md)
* [Pixel Ratio](general/device-pixel-ratio.md)
* [Options](general/options.md)
* [Colors](general/colors.md)
* [Fonts](general/fonts.md)
- * [Performance](general/performance.md)
+ * [Performance](general/performance.md)
* [Configuration](configuration/README.md)
* [Animations](configuration/animations.md)
* [Layout](configuration/layout.md)
}
});
```
+
As part of axis definition:
```javascript
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `labels` | `string[]` | - | An array of labels to display.
-| `min` | `string` | | The minimum item to display. [more...](#min-max-configuration)
-| `max` | `string` | | The maximum item to display. [more...](#min-max-configuration)
+| `min` | <code>string|number</code> | | The minimum item to display. [more...](#min-max-configuration)
+| `max` | <code>string|number</code> | | The maximum item to display. [more...](#min-max-configuration)
## Min Max Configuration
-For both the `min` and `max` properties, the value must be in the `labels` array. In the example below, the x axis would only display "March" through "June".
+
+For both the `min` and `max` properties, the value must be `string` in the `labels` array or `numeric` value as an index of a label in that array. In the example below, the x axis would only display "March" through "June".
```javascript
let chart = new Chart(ctx, {
}
});
```
+
+## Internal data format
+
+Internally category scale uses label indices
}
};
```
+
+## Internal data format
+
+Internally, linear scale uses numeric data
## Tick Configuration Options
The logarithmic scale options extend the [common tick configuration](README.md#tick-configuration). This scale does not define any options that are unique to it.
+
+## Internal data format
+
+Internally logarithmic scale uses numeric data
* `'labels'`: generates ticks from user given `labels` ONLY
### Parser
+
If this property is defined as a string, it is interpreted as a custom format to be used by Moment.js to parse the date.
If this is a function, it must return a Moment.js object given the appropriate data value.
+
+### Internal data format
+
+Internally time scale uses milliseconds since epoch
In contrast to the `suggested*` settings, the `min` and `max` settings set explicit ends to the axes. When these are set, some data points may not be visible.
## Step Size
+
If set, the scale ticks will be enumerated by multiple of `stepSize`, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
This example sets up a chart with a y axis that creates ticks at `0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5`.
| `fontSize` | `number` | `10` | font size in pixels.
| `fontStyle` | `string` | `'normal'` | Font style to use when rendering point labels.
| `lineHeight` | <code>number|string</code> | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)).
+
+## Internal data format
+
+Internally linear radial scale uses numeric data
# Bar
+
A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
{% chartjs %}
**Note:** for negative bars in vertical chart, `top` and `bottom` are flipped. Same goes for `left` and `right` in horizontal chart.
Options are:
+
* `'bottom'`
* `'left'`
* `'top'`
All these values, if `undefined`, fallback to the associated [`elements.rectangle.*`](../configuration/elements.md#rectangle-configuration) options.
## Dataset Configuration
+
The bar chart accepts the following configuration from the associated dataset options:
| Name | Type | Default | Description
## Data Structure
-The `data` property of a dataset for a bar chart is specified as an array of numbers. Each point in the data array corresponds to the label at the same index on the x axis.
-
-```javascript
-data: [20, 10]
-```
-
-You can also specify the dataset as x/y coordinates when using the [time scale](../axes/cartesian/time.md#time-cartesian-axis).
-
-```javascript
-data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]
-```
-
-You can also specify the dataset for a bar chart as arrays of two numbers. This will force rendering of bars with gaps between them (floating-bars). First and second numbers in array will correspond the start and the end point of a bar respectively.
-```javascript
-data: [[5,6], [-3,-6]]
-```
+All of the supported [data structures](../general/data-structures.md) can be used with bar charts.
## Stacked Bar Chart
The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.
+
+## Internal data format
+
+`{x, y, _custom}` where `_custom` is optional object defining stacked bar properties: `{start, end, barStart, barEnd, min, max}`. `start` and `end` are the input values. Those two are repeated in `barStart` (closer to origin), `barEnd` (further from origin), `min` and `max`.
```
**Important:** the radius property, `r` is **not** scaled by the chart, it is the raw radius in pixels of the bubble that is drawn on the canvas.
+
+## Internal data format
+
+`{x, y, _custom}` where `_custom` is the radius.
# Line
+
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
{% chartjs %}
{% endchartjs %}
## Example Usage
+
```javascript
var myLineChart = new Chart(ctx, {
type: 'line',
| `pointHoverRadius` | The radius of the point when hovered.
### cubicInterpolationMode
+
The following interpolation modes are supported.
+
* `'default'`
* `'monotone'`
If left untouched (`undefined`), the global `options.elements.line.cubicInterpolationMode` property is used.
### Stepped Line
+
The following values are supported for `steppedLine`.
+
* `false`: No Step Interpolation (default)
* `true`: Step-before Interpolation (eq. `'before'`)
* `'before'`: Step-before Interpolation
It is common to want to apply a configuration setting to all created line charts. The global line chart settings are stored in `Chart.defaults.line`. Changing the global options only affects charts created after the change. Existing charts are not changed.
For example, to configure all line charts with `spanGaps = true` you would do:
+
```javascript
Chart.defaults.line.spanGaps = true;
```
## Data Structure
-The `data` property of a dataset for a line chart can be passed in two formats.
-
-### number[]
-```javascript
-data: [20, 10]
-```
-
-When the `data` array is an array of numbers, the x axis is generally a [category](../axes/cartesian/category.md#category-cartesian-axis). The points are placed onto the axis using their position in the array. When a line chart is created with a category axis, the `labels` property of the data object must be specified.
-
-### Point[]
-
-```javascript
-data: [{
- x: 10,
- y: 20
-}, {
- x: 15,
- y: 10
-}]
-```
-
-This alternate is used for sparse datasets, such as those in [scatter charts](./scatter.md#scatter-chart). Each data point is specified using an object containing `x` and `y` properties.
+See [`Data structures`](../general/data-structures.md)
## Stacked Area Chart
}
});
```
+
+## Internal data format
+
+`{x, y}`
}]
}
```
+
+## Internal data format
+
+`{x, y}`
y: 10
}]
```
+
+## Internal data format
+
+`{x, y}`
--- /dev/null
+# Data structures
+
+The `data` property of a dataset can be passed in various formats. By default, that `data` is parsed using the associated chart type and scales.
+
+## Primitive[]
+
+```javascript
+data: [20, 10],
+labels: ['a', 'b']
+```
+
+When the `data` is an array of numbers, values from `labels` array at the same index are used for the index axis (`x` for vertical, `y` for horizontal charts).
+
+## Object[]
+
+```javascript
+data: [{x: 10, y: 20}, {x: 15, y: 10}]
+```
+
+```javascript
+data: [{x:'2016-12-25', y:20}, {x:'2016-12-26', y:10}]
+```
+
+```javascript
+data: [{x:'Sales', y:20}, {x:'Revenue', y:10}]
+```
+
+This is also the internal format used for parsed data. Property names are matched to scale-id. In this mode, parsing can be disabled by specifying `parsing: false` at chart options or dataset. If parsing is disabled, data must be in the formats the associated chart type and scales use internally.
+
+## Object
+
+```javascript
+data: {
+ January: 10,
+ February: 20
+}
+```
+
+In this mode, property name is used for `index` scale and value for `value` scale. For vertical charts, index scale is `x` and value scale is `y`.
});
```
+## Data structure and format
+
+Provide prepared data in the internal format accepted by the dataset and scales and set `parsing: false`. See [Data structures](data-structures.md) for more information.
+
## Data Decimation
Decimating your data will achieve the best results. When there is a lot of data to display on the graph, it doesn't make sense to show tens of thousands of data points on a graph that is only a few hundred pixels wide.
const me = this;
const {_cachedMeta: meta, _data: data} = me;
const {iScale, vScale, _stacked} = meta;
- let i, ilen, parsed;
-
- if (helpers.isArray(data[start])) {
+ const parsing = resolve([me.getDataset().parsing, me.chart.options.parsing, true]);
+ let offset = 0;
+ let i, parsed;
+
+ if (parsing === false) {
+ parsed = data;
+ offset = start;
+ } else if (helpers.isArray(data[start])) {
parsed = me._parseArrayData(meta, data, start, count);
} else if (helpers.isObject(data[start])) {
parsed = me._parseObjectData(meta, data, start, count);
parsed = me._parsePrimitiveData(meta, data, start, count);
}
- for (i = 0, ilen = parsed.length; i < ilen; ++i) {
- meta.data[start + i]._parsed = parsed[i];
+ for (i = 0; i < count; ++i) {
+ meta.data[i + start]._parsed = parsed[i + offset];
}
if (_stacked) {
projects / thirdparty / Chart.js.git / commitdiff
