mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix some space management issue

This commit is contained in:
Subhash Halder 2023-09-03 13:38:47 +05:30
parent 060d961f39
commit cc5190c1ba
16 changed files with 232 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
demos/xychart.html
View File

@ -92,6 +92,17 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<h1>XY Charts demos</h1>
<pre class="mermaid">
%%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<script type="module">

31
docs/syntax/xyChart.md
View File

@ -110,23 +110,24 @@ 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 |
| plotBorderWidth | Width of the border around the plot | 2 |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig
| Parameter | Description | Default value |
| ------------- | -------------------------------------------- | :-----------: |
| showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick along with the label to be shown or not | true |
| tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 |
| Parameter | Description | Default value |
| ------------- | ------------------------------------ | :-----------: |
| showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick to be shown or not | true |
| tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 |
| showAxisLine | Axis line to be shown or not | true |
| axisLineWidth | Thickness of the axis line | 2 |
## Chart Theme Variables
@ -142,15 +143,17 @@ Every grammer are optional other than the chart name and one data set, so you wi
| 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 | Array of colors for the plots eg \["#f3456", "#43445"] |
## Example on config and theme
```mermaid-example
%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@ -160,7 +163,7 @@ xychart-beta
```
```mermaid
%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

28
packages/mermaid/src/config.type.ts
View File

@ -747,6 +747,14 @@ export interface XYChartAxisConfig {
* width of the axis tick lines
*/
tickWidth?: number;
/**
* Show line across the axis
*/
showAxisLine?: boolean;
/**
* Width of the axis line
*/
axisLineWidth?: number;
}
/**
* This object contains configuration specific to XYCharts
@ -777,10 +785,6 @@ export interface XYChartConfig extends BaseDiagramConfig {
showTitle?: boolean;
xAxis?: XYChartAxisConfig1;
yAxis?: XYChartAxisConfig2;
/**
* width of the line around the plot of the chart
*/
plotBorderWidth?: number;
/**
* How to plot will be drawn horizontal or vertical
*/
@ -830,6 +834,14 @@ export interface XYChartAxisConfig1 {
* width of the axis tick lines
*/
tickWidth?: number;
/**
* Show line across the axis
*/
showAxisLine?: boolean;
/**
* Width of the axis line
*/
axisLineWidth?: number;
}
/**
* This object contains configuration for XYChart axis config
@ -871,6 +883,14 @@ export interface XYChartAxisConfig2 {
* width of the axis tick lines
*/
tickWidth?: number;
/**
* Show line across the axis
*/
showAxisLine?: boolean;
/**
* Width of the axis line
*/
axisLineWidth?: number;
}
/**
* The object containing configurations specific for entity relationship diagrams

10
packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
View File

@ -2,6 +2,7 @@ export interface XYChartAxisThemeConfig {
titleColor: string;
labelColor: string;
tickColor: string;
axisLineColor: string;
}
export interface XYChartThemeConfig {
@ -11,9 +12,11 @@ export interface XYChartThemeConfig {
xAxisLableColor: string;
xAxisTitleColor: string;
xAxisTickColor: string;
xAxisLineColor: string;
yAxisLableColor: string;
yAxisTitleColor: string;
yAxisTickColor: string;
yAxisLineColor: string;
plotColorPalette: string;
}
@ -81,6 +84,8 @@ export interface XYChartAxisConfig {
showTick: boolean;
tickLength: number;
tickWidth: number;
showAxisLine: boolean;
axisLineWidth: number;
}
export interface XYChartConfig {
@ -91,7 +96,6 @@ export interface XYChartConfig {
showTitle: boolean;
xAxis: XYChartAxisConfig;
yAxis: XYChartAxisConfig;
plotBorderWidth: number;
chartOrientation: 'vertical' | 'horizontal';
plotReservedSpacePercent: number;
}
@ -115,8 +119,8 @@ export interface Point {
y: number;
}
export type TextVerticalPos = 'left' | 'center' | 'right';
export type TextHorizontalPos = 'top' | 'middle' | 'bottom';
export type TextHorizontalPos = 'left' | 'center' | 'right';
export type TextVerticalPos = 'top' | 'middle' | 'bottom';
export interface RectElem extends Point {
width: number;

22
packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
View File

@ -32,6 +32,7 @@ export class Orchestrator {
titleColor: chartThemeConfig.xAxisTitleColor,
labelColor: chartThemeConfig.xAxisLableColor,
tickColor: chartThemeConfig.xAxisTickColor,
axisLineColor: chartThemeConfig.xAxisLineColor,
},
tmpSVGGElem
),
@ -42,6 +43,7 @@ export class Orchestrator {
titleColor: chartThemeConfig.yAxisTitleColor,
labelColor: chartThemeConfig.yAxisLableColor,
tickColor: chartThemeConfig.yAxisTickColor,
axisLineColor: chartThemeConfig.yAxisLineColor,
},
tmpSVGGElem
),
@ -94,11 +96,11 @@ export class Orchestrator {
chartHeight += availableHeight;
availableHeight = 0;
}
const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
plotX += plotBorderWidthHalf;
plotY += plotBorderWidthHalf;
chartWidth -= this.chartConfig.plotBorderWidth;
chartHeight -= this.chartConfig.plotBorderWidth;
// const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
// plotX += plotBorderWidthHalf;
// plotY += plotBorderWidthHalf;
// chartWidth -= this.chartConfig.plotBorderWidth;
// chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({
width: chartWidth,
height: chartHeight,
@ -166,11 +168,11 @@ export class Orchestrator {
chartHeight += availableHeight;
availableHeight = 0;
}
const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
plotX += plotBorderWidthHalf;
plotY += plotBorderWidthHalf;
chartWidth -= this.chartConfig.plotBorderWidth;
chartHeight -= this.chartConfig.plotBorderWidth;
// const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
// plotX += plotBorderWidthHalf;
// plotY += plotBorderWidthHalf;
// chartWidth -= this.chartConfig.plotBorderWidth;
// chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({
width: chartWidth,
height: chartHeight,

4
packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
View File

@ -64,8 +64,8 @@ export class ChartTitle implements ChartComponent {
{
fontSize: this.chartConfig.titleFontSize,
text: this.chartData.title,
verticalPos: 'center',
horizontalPos: 'middle',
verticalPos: 'middle',
horizontalPos: 'center',
x: this.boundingRect.x + this.boundingRect.width / 2,
y: this.boundingRect.y + this.boundingRect.height / 2,
fill: this.chartThemeConfig.titleColor,

135
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
View File

@ -20,6 +20,7 @@ export abstract class BaseAxis implements Axis {
protected showTitle = false;
protected showLabel = false;
protected showTick = false;
protected showAxisLine = false;
protected outerPadding = 0;
constructor(
@ -35,6 +36,11 @@ export abstract class BaseAxis implements Axis {
setRange(range: [number, number]): void {
this.range = range;
if (this.axisPosition === 'left' || this.axisPosition === 'right') {
this.boundingRect.height = range[1] - range[0];
} else {
this.boundingRect.width = range[1] - range[0];
}
this.recalculateScale();
}
@ -77,6 +83,10 @@ export abstract class BaseAxis implements Axis {
private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) {
let availableHeight = availableSpace.height;
if (this.axisConfig.showAxisLine && availableHeight > this.axisConfig.axisLineWidth) {
availableHeight -= this.axisConfig.axisLineWidth;
this.showAxisLine = true;
}
if (this.axisConfig.showLabel) {
const spaceRequired = this.getLabelDimension();
const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width;
@ -96,7 +106,7 @@ export abstract class BaseAxis implements Axis {
if (this.axisConfig.showTitle && this.title) {
const spaceRequired = this.textDimensionCalculator.getMaxDimension(
[this.title],
this.axisConfig.labelFontSize
this.axisConfig.titleFontSize
);
const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
log.trace('height required for axis title: ', heightRequired);
@ -111,6 +121,10 @@ export abstract class BaseAxis implements Axis {
private calculateSpaceIfDrawnVertical(availableSpace: Dimension) {
let availableWidth = availableSpace.width;
if (this.axisConfig.showAxisLine && availableWidth > this.axisConfig.axisLineWidth) {
availableWidth -= this.axisConfig.axisLineWidth;
this.showAxisLine = true;
}
if (this.axisConfig.showLabel) {
const spaceRequired = this.getLabelDimension();
const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
@ -129,9 +143,9 @@ export abstract class BaseAxis implements Axis {
if (this.axisConfig.showTitle && this.title) {
const spaceRequired = this.textDimensionCalculator.getMaxDimension(
[this.title],
this.axisConfig.labelFontSize
this.axisConfig.titleFontSize
);
const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
log.trace('width required for axis title: ', widthRequired);
if (widthRequired <= availableWidth) {
availableWidth -= widthRequired;
@ -166,6 +180,22 @@ export abstract class BaseAxis implements Axis {
private getDrawaableElementsForLeftAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2;
drawableElement.push({
type: 'path',
groupTexts: ['left-axis', 'axisl-line'],
data: [
{
path: `M ${x},${this.boundingRect.y} L ${x},${
this.boundingRect.y + this.boundingRect.height
} `,
strokeFill: this.axisThemeConfig.axisLineColor,
strokeWidth: this.axisConfig.axisLineWidth,
},
],
});
}
if (this.showLabel) {
drawableElement.push({
type: 'text',
@ -175,19 +205,23 @@ export abstract class BaseAxis implements Axis {
x:
this.boundingRect.x +
this.boundingRect.width -
this.axisConfig.labelPadding -
this.axisConfig.tickLength,
(this.showLabel ? this.axisConfig.labelPadding : 0) -
(this.showTick ? this.axisConfig.tickLength : 0) -
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
y: this.getScaleValue(tick),
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
rotation: 0,
verticalPos: 'right',
horizontalPos: 'middle',
verticalPos: 'middle',
horizontalPos: 'right',
})),
});
}
if (this.showTick) {
const x = this.boundingRect.x + this.boundingRect.width;
const x =
this.boundingRect.x +
this.boundingRect.width -
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0);
drawableElement.push({
type: 'path',
groupTexts: ['left-axis', 'ticks'],
@ -208,12 +242,12 @@ export abstract class BaseAxis implements Axis {
{
text: this.title,
x: this.boundingRect.x + this.axisConfig.titlePadding,
y: this.range[0] + (this.range[1] - this.range[0]) / 2,
y: this.boundingRect.y + this.boundingRect.height / 2,
fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize,
rotation: 270,
verticalPos: 'center',
horizontalPos: 'top',
verticalPos: 'top',
horizontalPos: 'center',
},
],
});
@ -222,6 +256,22 @@ export abstract class BaseAxis implements Axis {
}
private getDrawaableElementsForBottomAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2;
drawableElement.push({
type: 'path',
groupTexts: ['bottom-axis', 'axis-line'],
data: [
{
path: `M ${this.boundingRect.x},${y} L ${
this.boundingRect.x + this.boundingRect.width
},${y}`,
strokeFill: this.axisThemeConfig.axisLineColor,
strokeWidth: this.axisConfig.axisLineWidth,
},
],
});
}
if (this.showLabel) {
drawableElement.push({
type: 'text',
@ -229,12 +279,16 @@ export abstract class BaseAxis implements Axis {
data: this.getTickValues().map((tick) => ({
text: tick.toString(),
x: this.getScaleValue(tick),
y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength,
y:
this.boundingRect.y +
(this.showLabel ? this.axisConfig.labelPadding : 0) +
(this.showTitle ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
rotation: 0,
verticalPos: 'center',
horizontalPos: 'top',
verticalPos: 'top',
horizontalPos: 'center',
})),
});
}
@ -244,8 +298,12 @@ export abstract class BaseAxis implements Axis {
type: 'path',
groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${
y + this.axisConfig.tickLength
path: `M ${this.getScaleValue(tick)},${
y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
} L ${this.getScaleValue(tick)},${
y +
(this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
}`,
strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth,
@ -264,8 +322,8 @@ export abstract class BaseAxis implements Axis {
fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize,
rotation: 0,
verticalPos: 'center',
horizontalPos: 'bottom',
verticalPos: 'bottom',
horizontalPos: 'center',
},
],
});
@ -274,6 +332,22 @@ export abstract class BaseAxis implements Axis {
}
private getDrawaableElementsForTopAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2;
drawableElement.push({
type: 'path',
groupTexts: ['top-axis', 'axis-line'],
data: [
{
path: `M ${this.boundingRect.x},${y} L ${
this.boundingRect.x + this.boundingRect.width
},${y}`,
strokeFill: this.axisThemeConfig.axisLineColor,
strokeWidth: this.axisConfig.axisLineWidth,
},
],
});
}
if (this.showLabel) {
drawableElement.push({
type: 'text',
@ -283,14 +357,16 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick),
y:
this.boundingRect.y +
this.boundingRect.height -
this.axisConfig.labelPadding -
this.axisConfig.tickLength,
(this.showTitle
? this.axisConfig.titleFontSize +
this.axisConfig.labelPadding +
this.axisConfig.titlePadding * 2
: 0),
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
rotation: 0,
verticalPos: 'center',
horizontalPos: 'bottom',
verticalPos: 'top',
horizontalPos: 'center',
})),
});
}
@ -301,9 +377,12 @@ export abstract class BaseAxis implements Axis {
groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${
y + this.boundingRect.height
y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
} L ${this.getScaleValue(tick)},${
y + this.boundingRect.height - this.axisConfig.tickLength
y +
this.boundingRect.height -
this.axisConfig.tickLength -
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
}`,
strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth,
@ -317,13 +396,13 @@ export abstract class BaseAxis implements Axis {
data: [
{
text: this.title,
x: this.range[0] + (this.range[1] - this.range[0]) / 2,
x: this.boundingRect.x + this.boundingRect.width / 2,
y: this.boundingRect.y + this.axisConfig.titlePadding,
fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize,
rotation: 0,
verticalPos: 'center',
horizontalPos: 'top',
verticalPos: 'top',
horizontalPos: 'center',
},
],
});

10
packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
View File

@ -56,11 +56,11 @@ export class Plot implements Plot {
throw Error('Axes must be passed to render Plots');
}
const drawableElem: DrawableElem[] = [
...new PlotBorder(
this.boundingRect,
this.chartConfig.chartOrientation,
this.chartThemeConfig
).getDrawableElement(),
// ...new PlotBorder(
// this.boundingRect,
// this.chartConfig.chartOrientation,
// this.chartThemeConfig
// ).getDrawableElement(),
];
for (const [i, plot] of this.chartData.plots.entries()) {
switch (plot.type) {

14
packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
View File

@ -14,11 +14,15 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
const db = diagObj.db as typeof XYChartDB;
const themeConfig = db.getChartThemeConfig();
const chartConfig = db.getChartConfig();
function getDominantBaseLine(horizontalPos: TextHorizontalPos) {
return horizontalPos === 'top' ? 'hanging' : 'middle';
function getDominantBaseLine(horizontalPos: TextVerticalPos) {
return horizontalPos === 'top'
? 'text-before-edge'
: horizontalPos === 'bottom'
? 'text-after-edge'
: 'middle';
}
function getTextAnchor(verticalPos: TextVerticalPos) {
function getTextAnchor(verticalPos: TextHorizontalPos) {
return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle';
}
@ -108,8 +112,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
.attr('y', 0)
.attr('fill', (data) => data.fill)
.attr('font-size', (data) => data.fontSize)
.attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos))
.attr('text-anchor', (data) => getTextAnchor(data.verticalPos))
.attr('dominant-baseline', (data) => getDominantBaseLine(data.verticalPos))
.attr('text-anchor', (data) => getTextAnchor(data.horizontalPos))
.attr('transform', (data) => getTextTransformation(data))
.text((data) => data.text);
break;

29
packages/mermaid/src/docs/syntax/xyChart.md
View File

@ -104,23 +104,24 @@ xychart-beta
| showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig |
| plotBorderWidth | Width of the border around the plot | 2 |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig
| Parameter | Description | Default value |
| ------------- | -------------------------------------------- | :-----------: |
| showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick along with the label to be shown or not | true |
| tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 |
| Parameter | Description | Default value |
| ------------- | ------------------------------------ | :-----------: |
| showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick to be shown or not | true |
| tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 |
| showAxisLine | Axis line to be shown or not | true |
| axisLineWidth | Thickness of the axis line | 2 |
## Chart Theme Variables
@ -137,15 +138,17 @@ Themes for xychart resides inside xychart attribute so to set the variables use
| 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 | Array of colors for the plots eg ["#f3456", "#43445"] |
## Example on config and theme
```mermaid-example
%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
%%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

18
packages/mermaid/src/schemas/config.schema.yaml
View File

@ -1000,6 +1000,8 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
- showTick
- tickLength
- tickWidth
- showAxisLine
- axisLineWidth
properties:
showLabel:
description: Should show the axis labels (tick text)
@ -1043,6 +1045,16 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
type: integer
default: 2
minimum: 1
showAxisLine:
description: Show line across the axis
type: boolean
default: true
axisLineWidth:
description: Width of the axis line
type: integer
default: 2
minimum: 1
XYChartConfig:
title: XYChart Config
allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
@ -1057,7 +1069,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
- xAxis
- yAxis
- showTitle
- plotBorderWidth
- chartOrientation
- plotReservedSpacePercent
properties:
@ -1091,11 +1102,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
yAxis:
$ref: '#/$defs/XYChartAxisConfig'
default: { '$ref': '#/$defs/XYChartAxisConfig' }
plotBorderWidth:
description: width of the line around the plot of the chart
type: integer
default: 2
minimum: 0
chartOrientation:
description: How to plot will be drawn horizontal or vertical
tsType: '"vertical" | "horizontal"'

2
packages/mermaid/src/themes/theme-base.js
View File

@ -253,9 +253,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#FFF4DD',
'#FFD8B1',

2
packages/mermaid/src/themes/theme-dark.js
View File

@ -259,9 +259,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#3498db',
'#2ecc71',

2
packages/mermaid/src/themes/theme-default.js
View File

@ -280,9 +280,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#ECECFF',
'#8493A6',

2
packages/mermaid/src/themes/theme-forest.js
View File

@ -248,9 +248,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#CDE498',
'#FF6B6B',

2
packages/mermaid/src/themes/theme-neutral.js
View File

@ -279,9 +279,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#EEE',
'#6BB8E4',