| 1 | > **Warning** |
| 2 | > |
| 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 4 | > |
| 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md). |
| 6 | |
| 7 | # XY Chart |
| 8 | |
| 9 | > In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables. |
| 10 | |
| 11 | > It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time. |
| 12 | |
| 13 | ## Example |
| 14 | |
| 15 | ```mermaid-example |
| 16 | xychart |
| 17 | title "Sales Revenue" |
| 18 | x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] |
| 19 | y-axis "Revenue (in $)" 4000 --> 11000 |
| 20 | bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 21 | line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 22 | ``` |
| 23 | |
| 24 | ```mermaid |
| 25 | xychart |
| 26 | title "Sales Revenue" |
| 27 | x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] |
| 28 | y-axis "Revenue (in $)" 4000 --> 11000 |
| 29 | bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 30 | line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 31 | ``` |
| 32 | |
| 33 | ## Syntax |
| 34 | |
| 35 | > **Note** |
| 36 | > All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"` |
| 37 | |
| 38 | ### Orientations |
| 39 | |
| 40 | The chart can be drawn horizontal or vertical, default value is vertical. |
| 41 | |
| 42 | ``` |
| 43 | xychart horizontal |
| 44 | ... |
| 45 | ``` |
| 46 | |
| 47 | ### Title |
| 48 | |
| 49 | The title is a short description of the chart and it will always render on top of the chart. |
| 50 | |
| 51 | #### Example |
| 52 | |
| 53 | ``` |
| 54 | xychart |
| 55 | title "This is a simple example" |
| 56 | ... |
| 57 | ``` |
| 58 | |
| 59 | > **Note** |
| 60 | > If the title is a single word one no need to use `"`, but if it has space `"` is needed |
| 61 | |
| 62 | ### x-axis |
| 63 | |
| 64 | The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed. |
| 65 | |
| 66 | #### Example |
| 67 | |
| 68 | 1. `x-axis title min --> max` x-axis will function as numeric with the given range |
| 69 | 2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type |
| 70 | |
| 71 | ### y-axis |
| 72 | |
| 73 | The y-axis is employed to represent numerical range values, it cannot have categorical values. |
| 74 | |
| 75 | #### Example |
| 76 | |
| 77 | 1. `y-axis title min --> max` |
| 78 | 2. `y-axis title` it will only add the title, the range will be auto generated from data. |
| 79 | |
| 80 | > **Note** |
| 81 | > Both x and y axis are optional if not provided we will try to create the range |
| 82 | |
| 83 | ### Line chart |
| 84 | |
| 85 | A line chart offers the capability to graphically depict lines. |
| 86 | |
| 87 | #### Example |
| 88 | |
| 89 | 1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values. |
| 90 | |
| 91 | ### Bar chart |
| 92 | |
| 93 | A bar chart offers the capability to graphically depict bars. |
| 94 | |
| 95 | #### Example |
| 96 | |
| 97 | 1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values. |
| 98 | |
| 99 | #### Simplest example |
| 100 | |
| 101 | The only two things required are the chart name (`xychart`) and one data set. So you will be able to draw a chart with a simple config like |
| 102 | |
| 103 | ``` |
| 104 | xychart |
| 105 | line [+1.3, .6, 2.4, -.34] |
| 106 | ``` |
| 107 | |
| 108 | ## Chart Configurations |
| 109 | |
| 110 | | Parameter | Description | Default value | |
| 111 | | ------------------------ | ------------------------------------------------------------- | :-----------: | |
| 112 | | width | Width of the chart | 700 | |
| 113 | | height | Height of the chart | 500 | |
| 114 | | titlePadding | Top and Bottom padding of the title | 10 | |
| 115 | | titleFontSize | Title font size | 20 | |
| 116 | | showTitle | Title to be shown or not | true | |
| 117 | | xAxis | xAxis configuration | AxisConfig | |
| 118 | | yAxis | yAxis configuration | AxisConfig | |
| 119 | | chartOrientation | 'vertical' or 'horizontal' | 'vertical' | |
| 120 | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | |
| 121 | | showDataLabel | Should show the value corresponding to the bar within the bar | false | |
| 122 | |
| 123 | ### AxisConfig |
| 124 | |
| 125 | | Parameter | Description | Default value | |
| 126 | | ------------- | ------------------------------------ | :-----------: | |
| 127 | | showLabel | Show axis labels or tick values | true | |
| 128 | | labelFontSize | Font size of the label to be drawn | 14 | |
| 129 | | labelPadding | Top and Bottom padding of the label | 5 | |
| 130 | | showTitle | Axis title to be shown or not | true | |
| 131 | | titleFontSize | Axis title font size | 16 | |
| 132 | | titlePadding | Top and Bottom padding of Axis title | 5 | |
| 133 | | showTick | Tick to be shown or not | true | |
| 134 | | tickLength | How long the tick will be | 5 | |
| 135 | | tickWidth | How width the tick will be | 2 | |
| 136 | | showAxisLine | Axis line to be shown or not | true | |
| 137 | | axisLineWidth | Thickness of the axis line | 2 | |
| 138 | |
| 139 | ## Chart Theme Variables |
| 140 | |
| 141 | Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax: |
| 142 | |
| 143 | ```yaml |
| 144 | --- |
| 145 | config: |
| 146 | themeVariables: |
| 147 | xyChart: |
| 148 | titleColor: '#ff0000' |
| 149 | --- |
| 150 | ``` |
| 151 | |
| 152 | | Parameter | Description | |
| 153 | | ---------------- | --------------------------------------------------------- | |
| 154 | | backgroundColor | Background color of the whole chart | |
| 155 | | titleColor | Color of the Title text | |
| 156 | | xAxisLabelColor | Color of the x-axis labels | |
| 157 | | xAxisTitleColor | Color of the x-axis title | |
| 158 | | xAxisTickColor | Color of the x-axis tick | |
| 159 | | xAxisLineColor | Color of the x-axis line | |
| 160 | | yAxisLabelColor | Color of the y-axis labels | |
| 161 | | yAxisTitleColor | Color of the y-axis title | |
| 162 | | yAxisTickColor | Color of the y-axis tick | |
| 163 | | yAxisLineColor | Color of the y-axis line | |
| 164 | | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | |
| 165 | |
| 166 | ### Setting Colors for Lines and Bars |
| 167 | |
| 168 | To set the color for lines and bars, use the `plotColorPalette` parameter. Colors in the palette will correspond sequentially to the elements in your chart (e.g., first bar/line will use the first color specified in the palette). |
| 169 | |
| 170 | ```mermaid-example |
| 171 | --- |
| 172 | config: |
| 173 | themeVariables: |
| 174 | xyChart: |
| 175 | plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000' |
| 176 | --- |
| 177 | xychart |
| 178 | title "Different Colors in xyChart" |
| 179 | x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"] |
| 180 | y-axis "valuesY" 0 --> 50 |
| 181 | %% Black line |
| 182 | line [10,20,30,40] |
| 183 | %% Blue bar |
| 184 | bar [20,30,25,35] |
| 185 | %% Green bar |
| 186 | bar [15,25,20,30] |
| 187 | %% Red line |
| 188 | line [5,15,25,35] |
| 189 | ``` |
| 190 | |
| 191 | ```mermaid |
| 192 | --- |
| 193 | config: |
| 194 | themeVariables: |
| 195 | xyChart: |
| 196 | plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000' |
| 197 | --- |
| 198 | xychart |
| 199 | title "Different Colors in xyChart" |
| 200 | x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"] |
| 201 | y-axis "valuesY" 0 --> 50 |
| 202 | %% Black line |
| 203 | line [10,20,30,40] |
| 204 | %% Blue bar |
| 205 | bar [20,30,25,35] |
| 206 | %% Green bar |
| 207 | bar [15,25,20,30] |
| 208 | %% Red line |
| 209 | line [5,15,25,35] |
| 210 | ``` |
| 211 | |
| 212 | ## Example on config and theme |
| 213 | |
| 214 | ```mermaid-example |
| 215 | --- |
| 216 | config: |
| 217 | xyChart: |
| 218 | width: 900 |
| 219 | height: 600 |
| 220 | showDataLabel: true |
| 221 | themeVariables: |
| 222 | xyChart: |
| 223 | titleColor: "#ff0000" |
| 224 | --- |
| 225 | xychart |
| 226 | title "Sales Revenue" |
| 227 | x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] |
| 228 | y-axis "Revenue (in $)" 4000 --> 11000 |
| 229 | bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 230 | line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 231 | ``` |
| 232 | |
| 233 | ```mermaid |
| 234 | --- |
| 235 | config: |
| 236 | xyChart: |
| 237 | width: 900 |
| 238 | height: 600 |
| 239 | showDataLabel: true |
| 240 | themeVariables: |
| 241 | xyChart: |
| 242 | titleColor: "#ff0000" |
| 243 | --- |
| 244 | xychart |
| 245 | title "Sales Revenue" |
| 246 | x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] |
| 247 | y-axis "Revenue (in $)" 4000 --> 11000 |
| 248 | bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 249 | line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] |
| 250 | ``` |
| 251 | |