marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-03 22:29:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://github.com/mermaid-js/mermaid into xychart

Browse Source 
* 'develop' of https://github.com/mermaid-js/mermaid: (546 commits)
  rebuild
  chore: Use string templates
  chore: Update docs
  chore: Fix docs
  chore: Add argos token to cypress config.
  chore: Remove cy.get('svg') calls
  chore: fix Argos parallel
  chore: Support local screenshot testing without applitools or argos
  chore: Skip checking drupal links
  chore: Remove reference screenshot generation from E2E
  chore: Remove cytoscape patch.
  chore(argos): disable matchImageSnapshot
  chore(argos): put parallel mode only when necessary
  chore(argos): setup parallel mode
  chore: setup Argos Visual Testing on E2E
  Fixed linters
  Added more specs for elk detector
  Fixed wrong elk detector, check only beginning of the line for diagram keywords
  Removed unused patch
  Fix cytoscape patch
  ...
This commit is contained in:
Sidharth Vinod
2024-06-21 10:24:58 +05:30
parent 90be8dedf6 9f375139d5
commit 4f9cf4f9fc
474 changed files with 26979 additions and 18184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/syntax/xyChart.md
View File

@@ -81,8 +81,10 @@ xychart-beta
The chart can be drawn horizontal or vertical, default value is vertical.
xychart-beta horizontal
...
```
xychart-beta horizontal
...
```
### Title
@@ -90,9 +92,11 @@ The title is a short description of the chart and it will always render on top o
#### Example
xychart-beta
title "This is a simple example"
...
```
xychart-beta
title "This is a simple example"
...
```
> **Note**
> If the title is a single word one no need to use `"`, but if it has space `"` is needed
@@ -103,8 +107,8 @@ The x-axis primarily serves as a categorical value, although it can also functio
#### Example
1. `x-axis title min --> max` x-axis will function as numeric with the given range
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
1. `x-axis title min --> max` x-axis will function as numeric with the given range
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
### y-axis
@@ -112,8 +116,8 @@ The y-axis is employed to represent numerical range values, it cannot have categ
#### Example
1. `y-axis title min --> max`
2. `y-axis title` it will only add the title, the range will be auto generated from data.
1. `y-axis title min --> max`
2. `y-axis title` it will only add the title, the range will be auto generated from data.
> **Note**
> Both x and y axis are optional if not provided we will try to create the range
@@ -124,7 +128,7 @@ A line chart offers the capability to graphically depict lines.
#### Example
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
### Bar chart
@@ -132,14 +136,16 @@ A bar chart offers the capability to graphically depict bars.
#### Example
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
#### Simplest example
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]
```
xychart-beta
line [+1.3, .6, 2.4, -.34]
```
## Chart Configurations
@@ -181,11 +187,11 @@ The only two things required are the chart name (`xychart-beta`) and one data se
| ---------------- | --------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisLabelColor | 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 |
| yAxisLabelColor | 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 |