marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-17 22:39:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/4269_add_xychart

Browse Source
This commit is contained in:
Subhash Halder
2023-09-19 21:16:52 +05:30
parent e061489b84 8be8736131
commit e56effa029
7 changed files with 40 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/syntax/xyChart.md
View File

@@ -37,12 +37,12 @@ xychart-beta
### Orientations
The chart can be drawn horizontal or vertical, default value is vertical
The chart can be drawn horizontal or vertical, default value is vertical.
xychart-beta horizontal
...
### Title
### Title.
The title is a short description of the chart and it will always render on top of the chart.
@@ -66,7 +66,7 @@ The x-axis primarily serves as a categorical value, although it can also functio
### y-axis
The y-axis is employed to represent numerical range values, it can't have categorical values.
The y-axis is employed to represent numerical range values, it cannot have categorical values.
#### Example
@@ -94,7 +94,7 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example
Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like
The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
xychart-beta
line [+1.3, .6, 2.4, -.34]
@@ -110,7 +110,7 @@ Every grammer are optional other than the chart name and one data set, so you wi
| showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig
@@ -135,19 +135,19 @@ Every grammer are optional other than the chart name and one data set, so you wi
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| Parameter | Description |
| ---------------- | ------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" |
| Parameter | Description |
| ---------------- | --------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
## Example on config and theme