150 lines
4.0 KiB
Markdown
150 lines
4.0 KiB
Markdown
## Axis chart: what is it
|
|
|
|
An axis chart is generally a 2D rendition of data, where a set of values corresponds to every point in a dataset. That's why, data is the most important component for a chart. For example, for some values across items, the data could look like:
|
|
```js
|
|
data = {
|
|
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
datasets: [
|
|
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
|
|
]
|
|
}
|
|
```
|
|
|
|
Rendering it doesn't require much more that that. Plug the data in with a [type]() `bar`, with an optional [color]() and [height]():
|
|
|
|
```js
|
|
new frappe.Chart( "#chart", {
|
|
data: data,
|
|
type: 'bar',
|
|
height: 140,
|
|
colors: ['red']
|
|
});
|
|
```
|
|
<project-demo
|
|
data="0"
|
|
v-bind:config="{ type: 'bar', height: 140, colors:['red'] }">
|
|
</project-demo>
|
|
|
|
|
|
And similarly, a `line` chart is data-wise homomorphic to a bar chart:
|
|
|
|
```js
|
|
type:'line'
|
|
```
|
|
<project-demo
|
|
data="0"
|
|
v-bind:config="{ type: 'line', height: 140, colors:['red'] }">
|
|
</project-demo>
|
|
|
|
|
|
## Adding more datasets
|
|
|
|
A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
|
|
|
|
```js
|
|
data: {
|
|
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
datasets: [
|
|
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
|
|
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
|
|
]
|
|
}
|
|
```
|
|
Notice that this case demonstrates why the `colors` option is an array. We'll see more about it ahead.
|
|
<project-demo data="1" v-bind:config="{
|
|
type: 'line',
|
|
height: 200,
|
|
colors:['green', 'light-green']
|
|
}"
|
|
v-bind:options="[
|
|
{
|
|
name: 'type',
|
|
path: ['type'],
|
|
type: 'String',
|
|
states: { 'Line': 'line', 'Bar': 'bar' },
|
|
activeState: 'Mixed'
|
|
}
|
|
]">
|
|
</project-demo>
|
|
|
|
|
|
## Responsiveness
|
|
|
|
Frappe Charts are responsive, as they rerender all the data in the current available container width. To demonstrate, let's take the example of setting the [bar width]() for bar charts.
|
|
|
|
In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.
|
|
|
|
```js
|
|
barOptions: {
|
|
spaceRatio: 0.2 // default: 1
|
|
},
|
|
```
|
|
Try resizing the window to see the effect, with different ratio values.
|
|
|
|
<project-demo data="2" v-bind:config="{
|
|
type: 'bar',
|
|
height: 140,
|
|
colors: ['orange'],
|
|
axisOptions: { xAxisMode: 'tick' },
|
|
barOptions: { spaceRatio: 0.2 },
|
|
}"
|
|
v-bind:options="[
|
|
{
|
|
name: 'spaceRatio',
|
|
path: ['barOptions', 'spaceRatio'],
|
|
type: 'number',
|
|
numberOptions: { min: 0.1, max: 1.9, step: 0.1 },
|
|
activeState: 0.2
|
|
}
|
|
]">
|
|
</project-demo>
|
|
|
|
|
|
## More Tweaks
|
|
|
|
Axis lines define a chart presentation. By default they are long `span`ning lines, but to give prominence to data points, X and/or Y axes can also be short `tick`s:
|
|
|
|
```js
|
|
axisOptions: {
|
|
xAxisMode: 'tick' // default: 'span'
|
|
},
|
|
```
|
|
<project-demo
|
|
data="2"
|
|
v-bind:config="{
|
|
type: 'bar',
|
|
height: 140,
|
|
colors:['blue'],
|
|
axisOptions: { xAxisMode: 'tick' }
|
|
}">
|
|
</project-demo>
|
|
|
|
|
|
Just like bar width, we can set the <b>dot size</b> on a line graph, with the [`dotSize`]() property in [`lineOptions`]().
|
|
|
|
```js
|
|
lineOptions: {
|
|
dotSize: 8 // default: 4
|
|
},
|
|
```
|
|
<project-demo data="2" v-bind:config="{
|
|
type: 'line',
|
|
height: 140,
|
|
colors:['orange'],
|
|
axisOptions: { xAxisMode: 'tick' },
|
|
lineOptions: { dotSize: 8 }
|
|
}"
|
|
v-bind:options="[
|
|
{
|
|
name: 'dotSize',
|
|
path: ['lineOptions', 'dotSize'],
|
|
type: 'number',
|
|
numberOptions: { min: 3, max: 10, step: 1 },
|
|
activeState: 8
|
|
}
|
|
]">
|
|
</project-demo>
|
|
|
|
|
|
These were some of the basic toggles to a chart; there are quite a few line options to go with, particularly to create [regions](). We'll look at those in next section.
|