Skip to content

Commit f72958b

Browse files
estruyfestruyf
committed
Updates to charts
1 parent 672378c commit f72958b

File tree

10 files changed

+46
-37
lines changed

10 files changed

+46
-37
lines changed

‎docs/documentation/docs/controls/ChartControl.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -336,15 +336,15 @@ Defines the type of chart that will be rendered. For more information what data
336336

337337
| Name | Chart.js Equivalent | Description |
338338
| ---- | ---- | ---- |
339-
| [Bar](./BarChart.md) | [bar](https://www.chartjs.org/docs/latest/charts/bar.html) | Vertical bar chart |
340-
| [Bubble](./BubbleChart.md) | [bubble](https://www.chartjs.org/docs/latest/charts/bubble.html) | Bubble chart |
341-
| [Doughnut](./DoughnutChart.md) | [doughnut](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Doughnut chart |
342-
| [HorizontalBar](./BarChart.md#horizontalbarchart) | [horizontalBar](https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart) | Horizontal bar chart |
343-
| [Line](./LineChart.md) | [line](https://www.chartjs.org/docs/latest/charts/line.html) | Line chart |
344-
| [Pie](./PieChart.md) | [pie](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Pie chart |
345-
| [PolarArea](./PolarAreaChart.md) | [polarArea](https://www.chartjs.org/docs/latest/charts/polar.html) | Polar area chart |
346-
| [Radar](./RadarChart.md) | [radar](https://www.chartjs.org/docs/latest/charts/radar.html) | Radar chart |
347-
| [Scatter](./ScatterChart.md) | [scatter](https://www.chartjs.org/docs/latest/charts/scatter.html) | Scatter graph |
339+
| [Bar](./charts/BarChart.md) | [bar](https://www.chartjs.org/docs/latest/charts/bar.html) | Vertical bar chart |
340+
| [Bubble](./charts/BubbleChart.md) | [bubble](https://www.chartjs.org/docs/latest/charts/bubble.html) | Bubble chart |
341+
| [Doughnut](./charts/DoughnutChart.md) | [doughnut](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Doughnut chart |
342+
| [HorizontalBar](./charts/BarChart.md#horizontalbarchart) | [horizontalBar](https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart) | Horizontal bar chart |
343+
| [Line](./charts/LineChart.md) | [line](https://www.chartjs.org/docs/latest/charts/line.html) | Line chart |
344+
| [Pie](./charts/PieChart.md) | [pie](https://www.chartjs.org/docs/latest/charts/doughnut.html) | Pie chart |
345+
| [PolarArea](./charts/PolarAreaChart.md) | [polarArea](https://www.chartjs.org/docs/latest/charts/polar.html) | Polar area chart |
346+
| [Radar](./charts/RadarChart.md) | [radar](https://www.chartjs.org/docs/latest/charts/radar.html) | Radar chart |
347+
| [Scatter](./charts/ScatterChart.md) | [scatter](https://www.chartjs.org/docs/latest/charts/scatter.html) | Scatter graph |
348348

349349
### IChartAccessibility
350350

‎docs/documentation/docs/controls/BarChart.md renamed to ‎docs/documentation/docs/controls/charts/BarChart.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Bar charts represent data values as vertical bars.
44

5-
![Default Bar Chart](../assets/BarChart.png)
5+
![Default Bar Chart](../../assets/BarChart.png)
66

77
## Example Usage
88

@@ -131,7 +131,7 @@ return (
131131

132132
Which will produce the following chart:
133133

134-
![Default Chart Colors](../assets/BarChartDefaultColors.png)
134+
![Default Chart Colors](../../assets/BarChartDefaultColors.png)
135135

136136
As with all charts, the `backgroundColor` and `borderColor` values can be one of the following:
137137

@@ -142,7 +142,7 @@ As with all charts, the `backgroundColor` and `borderColor` values can be one of
142142

143143
### Stacked Bar Chart
144144

145-
![Stacked Bar Chart](../assets/StackedBarChart.png)
145+
![Stacked Bar Chart](../../assets/StackedBarChart.png)
146146

147147
If your bar chart has multiple datasets, you can render it as a stacked bar chart by changing the settings on the X and Y axes to enable stacking, as follows:
148148

@@ -215,7 +215,7 @@ const data: Chart.ChartData = {
215215

216216
### Horizontal Bar Chart
217217

218-
![Horizontal Bar Chart](../assets/HorizontalBarChart.png)
218+
![Horizontal Bar Chart](../../assets/HorizontalBarChart.png)
219219

220220
To render a horizontal bar, use the following code:
221221

@@ -361,7 +361,7 @@ options={{
361361
362362
Which will produce the following chart:
363363
364-
![Bar Chart Time Series](../assets/BarTimeScale.png)
364+
![Bar Chart Time Series](../../assets/BarTimeScale.png)
365365
366366
> **NOTE:** As with regular data elements, you should pass the time scale array in the order that you want them to appear. Otherwise, you will get disappointing results.
367367

‎docs/documentation/docs/controls/BubbleChart.md renamed to ‎docs/documentation/docs/controls/charts/BubbleChart.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Bubble chart show elements across three dimensions. Each bubble in the chart is located according to the first two dimensions. The size of each bubble represents the thid dimension.
44

5-
![Default Bubble Chart](../assets/BubbleChart.png)
5+
![Default Bubble Chart](../../assets/BubbleChart.png)
66

77
## Example Usage
88

‎docs/documentation/docs/controls/DoughnutChart.md renamed to ‎docs/documentation/docs/controls/charts/DoughnutChart.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Doughnut charts are divided into segments, each of which shows the proportional value of the data.
44

5-
![Default Donut Chart](../assets/DoughnutChart.png)
5+
![Default Donut Chart](../../assets/DoughnutChart.png)
66

77
## Example Usage
88

‎docs/documentation/docs/controls/LineChart.md renamed to ‎docs/documentation/docs/controls/charts/LineChart.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Line charts represent data values as plotted points on a line.
44

5-
![Default Line Chart](../assets/LineChart.png)
5+
![Default Line Chart](../../assets/LineChart.png)
66

77
## Example Usage
88

@@ -83,7 +83,7 @@ return (
8383

8484
### Curved lines
8585

86-
![Curved Line Chart](../assets/LineChartCurved.png)
86+
![Curved Line Chart](../../assets/LineChartCurved.png)
8787

8888
You can render curved lines instead of straight lines by removing the `lineTension` setting from each dataset, or by setting it to a value other than `0`.
8989

@@ -133,7 +133,7 @@ return (
133133

134134
### Area Chart
135135

136-
![Area Chart](../assets/AreaChartDefault.png)
136+
![Area Chart](../../assets/AreaChartDefault.png)
137137

138138
To render an area chart, change the `fill` setting of the dataset to `true`.
139139

@@ -180,9 +180,9 @@ If your chart has negative and positive values, you can control where the filled
180180

181181
| `fill` Value | Description | Sample |
182182
| ---- | ---- | ---- |
183-
| `'start'` | Fill from the bottom of the chart | ![start fill](../assets/AreaChartFillStart.png) |
184-
| `'end'` | Fill from the top of the chart | ![end fill](../assets/AreaChartFillEnd.png) |
185-
| `'origin'` | Fill from the 'zero' line Same as `true` | ![origin fill](../assets/areachart.png) |
183+
| `'start'` | Fill from the bottom of the chart | ![start fill](../../assets/AreaChartFillStart.png) |
184+
| `'end'` | Fill from the top of the chart | ![end fill](../../assets/AreaChartFillEnd.png) |
185+
| `'origin'` | Fill from the 'zero' line Same as `true` | ![origin fill](../../assets/AreaChart.png) |
186186

187187
For example, the code below will set the `fill` value to `start`:
188188

@@ -227,11 +227,11 @@ return (
227227

228228
Which renders the following chart:
229229

230-
![Area Chart with Fill = 'start'](../assets/AreaChartFillStart.png)
230+
![Area Chart with Fill = 'start'](../../assets/AreaChartFillStart.png)
231231

232232
### Stacked Area Chart
233233

234-
![Stacked Area Chart](../assets/StackedAreaChart.png)
234+
![Stacked Area Chart](../../assets/StackedAreaChart.png)
235235

236236
If your bar chart has multiple datasets, you can render it as a stacked area chart by changing the settings on the Y axis to enable stacking, as follows:
237237

@@ -309,7 +309,7 @@ return (
309309

310310
As with lines, you can set the `lineTension` value to render curved lines instead of straight lines:
311311

312-
![Curved Area Chart](../assets/AreaChartCurved.png)
312+
![Curved Area Chart](../../assets/AreaChartCurved.png)
313313

314314
In addition to the `fill` values listed above, you can specify how each dataset fill:
315315

@@ -358,7 +358,7 @@ const data: Chart.ChartData = {
358358

359359
Will cause the first dataset to fill from the bottom of the chart, while the second dataset will fill to the previous dataset (by it's relative index of `-1`)
360360

361-
![Stacked Area Chart with fill values `start` and `'-1'`](../assets/StackedAreaChartFillStartMinus1.png)
361+
![Stacked Area Chart with fill values `start` and `'-1'`](../../assets/StackedAreaChartFillStartMinus1.png)
362362

363363
## Dataset Properties
364364

‎docs/documentation/docs/controls/PieChart.md renamed to ‎docs/documentation/docs/controls/charts/PieChart.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Pie charts are divided into segments, each of which shows the proportional value of the data.
44

5-
![Default Pie Chart](../assets/PieChart.png)
5+
![Default Pie Chart](../../assets/PieChart.png)
66

77
## Example Usage
88

@@ -67,7 +67,7 @@ return (
6767

6868
### Half-Moon Pie charts
6969

70-
![Half-Moon Pie Chart](../assets/PieChartHalfMoon.png)
70+
![Half-Moon Pie Chart](../../assets/PieChartHalfMoon.png)
7171

7272
By default, pie charts (and doughnut charts) render a whole circle. You can change the chart's `circumference` option to render partial circles.
7373

@@ -89,7 +89,7 @@ The default `circumference` value is `2 * Math.PI`. To render a half-moon, speci
8989

9090
Which renders the following half-moon:
9191

92-
![Sideway Half-Moon Pie Chart](../assets/PieChartHalfMoonSideway.png)
92+
![Sideway Half-Moon Pie Chart](../../assets/PieChartHalfMoonSideway.png)
9393

9494
To rotate the pie chart 90 degrees to the left, specify a `rotation` value in the chart's options. For example, to render the horizontal half-moon chart shown at the top of this section, use the following options:
9595

@@ -112,7 +112,7 @@ To rotate the pie chart 90 degrees to the left, specify a `rotation` value in th
112112

113113
Technically, doughnut charts and pie charts are derived from the same class in [Chart.js](https://github.com/), where a doughnut chart's `cutoutPercentage` is set to 50.
114114

115-
If you wish to render simple doughnut charts, use the [Doughnut Chart type](./doughnutchart.md).
115+
If you wish to render simple doughnut charts, use the [Doughnut Chart type](./DoughnutChart.md).
116116

117117
However, if you wish to customize how the pie/doughtnut chart is rendered, you can set the cutout percentage to a different value.
118118

@@ -136,7 +136,7 @@ For example, you can use the following code to render a custom "fuel-gauge" char
136136

137137
Will produce the following chart:
138138

139-
![Vroom vroom!](../assets/PieChartFuelGage.png)
139+
![Vroom vroom!](../../assets/PieChartFuelGage.png)
140140

141141
## Dataset Properties
142142

‎docs/documentation/docs/controls/PolarAreaChart.md renamed to ‎docs/documentation/docs/controls/charts/PolarAreaChart.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Polar charts are similar to pie charts, except that each segment has the same angle, and the radius of each segment differs depending on the value.
44

5-
![Default Polar Chart](../assets/PolarAreaChart.png)
5+
![Default Polar Chart](../../assets/PolarAreaChart.png)
66

77
## Example Usage
88

‎docs/documentation/docs/controls/RadarChart.md renamed to ‎docs/documentation/docs/controls/charts/RadarChart.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Radar charts are best used when comparing points of two or more datasets.
44

5-
![Default Radar Chart](../assets/RadarChart.png)
5+
![Default Radar Chart](../../assets/RadarChart.png)
66

77
## Example Usage
88

‎docs/documentation/docs/controls/ScatterChart.md renamed to ‎docs/documentation/docs/controls/charts/ScatterChart.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Scatter charts are similar to line charts, except that the X axis (the horizonta
44

55
Unlike other charts, scatter charts use `x` and `y` coordinates.
66

7-
![Default Scatter Chart](../assets/ScatterChart.png)
7+
![Default Scatter Chart](../../assets/ScatterChart.png)
88

99
## Example Usage
1010

@@ -151,7 +151,7 @@ Point elements can be configured to change their appearance using the following
151151

152152
You can change the point configuration in the chart via the `options.elements.point` configuration.
153153

154-
![Scatter with Point Styles](../assets/scatterpointstyle.png)
154+
![Scatter with Point Styles](../../assets/ScatterPointStyle.png)
155155

156156
For example, to render the above chart, use the following code:
157157

@@ -224,7 +224,7 @@ You can also control point configurations at the dataset level.
224224
```
225225

226226
Which renders the following chart:
227-
![Dataset Styles](../assets/ScatterDatasetStyle.png)
227+
![Dataset Styles](../../assets/ScatterDatasetStyle.png)
228228

229229
## For More Information
230230

‎docs/documentation/mkdocs.yml

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@ site_name: '@pnp/spfx-controls-react'
22
nav:
33
- Home: 'index.md'
44
- Controls:
5-
- ChartControl: 'controls/ChartControl.md'
5+
- Charts:
6+
- "ChartControl": 'controls/ChartControl.md'
7+
- "Bar Chart": 'controls/charts/BarChart.md'
8+
- "Bubble Chart": 'controls/charts/BubbleChart.md'
9+
- "Doughnut Chart": 'controls/charts/DoughnutChart.md'
10+
- "Line Chart": 'controls/charts/LineChart.md'
11+
- "Pie Chart": 'controls/charts/PieChart.md'
12+
- "Polar Area Chart": 'controls/charts/PolarAreaChart.md'
13+
- "Radar Chart": 'controls/charts/RadarChart.md'
14+
- "Scatter Chart": 'controls/charts/ScatterChart.md'
615
- FileTypeIcon: 'controls/FileTypeIcon.md'
716
- ListItemPicker: 'controls/ListItemPicker.md'
817
- ListPicker: 'controls/ListPicker.md'

0 commit comments

Comments
 (0)