diff --git a/demos/xychart.html b/demos/xychart.html
index 0d0bd8d00..927047129 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -92,6 +92,20 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
+ sparkline demos
+
+ %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
+ xychart-beta
+ line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+
+
+ sparkBar demos
+
+ %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%%
+ xychart-beta
+ bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+
+
XY Charts demos
%%{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 }}}%%
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 477473156..4ee83bdba 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -135,20 +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 |
-| plotBorderColor | Color of the plot border |
-| 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"] |
+| 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" |
## Example on config and theme
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
index 33eb4f227..3d188895f 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
@@ -8,12 +8,11 @@ export interface XYChartAxisThemeConfig {
export interface XYChartThemeConfig {
backgroundColor: string;
titleColor: string;
- plotBorderColor: string;
- xAxisLableColor: string;
+ xAxisLabelColor: string;
xAxisTitleColor: string;
xAxisTickColor: string;
xAxisLineColor: string;
- yAxisLableColor: string;
+ yAxisLabelColor: string;
yAxisTitleColor: string;
yAxisTickColor: string;
yAxisLineColor: string;
@@ -120,7 +119,7 @@ export interface Point {
}
export type TextHorizontalPos = 'left' | 'center' | 'right';
-export type TextVerticalPos = 'top' | 'middle' | 'bottom';
+export type TextVerticalPos = 'top' | 'middle';
export interface RectElem extends Point {
width: number;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
index b008c9a29..256a103eb 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
@@ -30,7 +30,7 @@ export class Orchestrator {
chartConfig.xAxis,
{
titleColor: chartThemeConfig.xAxisTitleColor,
- labelColor: chartThemeConfig.xAxisLableColor,
+ labelColor: chartThemeConfig.xAxisLabelColor,
tickColor: chartThemeConfig.xAxisTickColor,
axisLineColor: chartThemeConfig.xAxisLineColor,
},
@@ -41,7 +41,7 @@ export class Orchestrator {
chartConfig.yAxis,
{
titleColor: chartThemeConfig.yAxisTitleColor,
- labelColor: chartThemeConfig.yAxisLableColor,
+ labelColor: chartThemeConfig.yAxisLabelColor,
tickColor: chartThemeConfig.yAxisTickColor,
axisLineColor: chartThemeConfig.yAxisLineColor,
},
@@ -96,11 +96,6 @@ 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;
this.componentStore.plot.calculateSpace({
width: chartWidth,
height: chartHeight,
@@ -168,11 +163,6 @@ 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;
this.componentStore.plot.calculateSpace({
width: chartWidth,
height: chartHeight,
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
index 99ccbb6da..18dd38b71 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
@@ -27,7 +27,7 @@ export class ChartTitle implements ChartComponent {
width: 0,
height: 0,
};
- this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle);
+ this.showChartTitle = false;
}
setBoundingBoxXY(point: Point): void {
this.boundingRect.x = point.x;
@@ -43,10 +43,12 @@ export class ChartTitle implements ChartComponent {
if (
titleDimension.width <= widthRequired &&
titleDimension.height <= heightRequired &&
- this.showChartTitle
+ this.chartConfig.showTitle &&
+ this.chartData.title
) {
this.boundingRect.width = widthRequired;
this.boundingRect.height = heightRequired;
+ this.showChartTitle = true;
}
return {
@@ -56,7 +58,7 @@ export class ChartTitle implements ChartComponent {
}
getDrawableElements(): DrawableElem[] {
const drawableElem: DrawableElem[] = [];
- if (this.boundingRect.height > 0 && this.boundingRect.width > 0) {
+ if (this.showChartTitle) {
drawableElem.push({
groupTexts: ['chart-title'],
type: 'text',
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
index 873455a3f..1f1699028 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
@@ -22,6 +22,8 @@ export abstract class BaseAxis implements Axis {
protected showTick = false;
protected showAxisLine = false;
protected outerPadding = 0;
+ protected titleTextHeight = 0;
+ protected labelTextHeight = 0;
constructor(
protected axisConfig: XYChartAxisConfig,
@@ -93,6 +95,7 @@ export abstract class BaseAxis implements Axis {
this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding);
const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
+ this.labelTextHeight = spaceRequired.height;
log.trace('height required for axis label: ', heightRequired);
if (heightRequired <= availableHeight) {
availableHeight -= heightRequired;
@@ -109,6 +112,7 @@ export abstract class BaseAxis implements Axis {
this.axisConfig.titleFontSize
);
const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
+ this.titleTextHeight = spaceRequired.height;
log.trace('height required for axis title: ', heightRequired);
if (heightRequired <= availableHeight) {
availableHeight -= heightRequired;
@@ -146,6 +150,7 @@ export abstract class BaseAxis implements Axis {
this.axisConfig.titleFontSize
);
const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
+ this.titleTextHeight = spaceRequired.height;
log.trace('width required for axis title: ', widthRequired);
if (widthRequired <= availableWidth) {
availableWidth -= widthRequired;
@@ -157,10 +162,6 @@ export abstract class BaseAxis implements Axis {
}
calculateSpace(availableSpace: Dimension): Dimension {
- if (!(this.axisConfig.showLabel || this.axisConfig.showTitle)) {
- this.recalculateScale();
- return { width: 0, height: 0 };
- }
if (this.axisPosition === 'left' || this.axisPosition === 'right') {
this.calculateSpaceIfDrawnVertical(availableSpace);
} else {
@@ -281,8 +282,8 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick),
y:
this.boundingRect.y +
- (this.showLabel ? this.axisConfig.labelPadding : 0) +
- (this.showTitle ? this.axisConfig.tickLength : 0) +
+ this.axisConfig.labelPadding +
+ (this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
@@ -293,17 +294,13 @@ export abstract class BaseAxis implements Axis {
});
}
if (this.showTick) {
- const y = this.boundingRect.y;
+ const y = this.boundingRect.y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0);
drawableElement.push({
type: 'path',
groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({
- 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)
+ path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${
+ y + this.axisConfig.tickLength
}`,
strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth,
@@ -318,11 +315,15 @@ export abstract class BaseAxis implements Axis {
{
text: this.title,
x: this.range[0] + (this.range[1] - this.range[0]) / 2,
- y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding,
+ y:
+ this.boundingRect.y +
+ this.boundingRect.height -
+ this.axisConfig.titlePadding -
+ this.titleTextHeight,
fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize,
rotation: 0,
- verticalPos: 'bottom',
+ verticalPos: 'top',
horizontalPos: 'center',
},
],
@@ -357,11 +358,8 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick),
y:
this.boundingRect.y +
- (this.showTitle
- ? this.axisConfig.titleFontSize +
- this.axisConfig.labelPadding +
- this.axisConfig.titlePadding * 2
- : 0),
+ (this.showTitle ? this.titleTextHeight + this.axisConfig.titlePadding * 2 : 0) +
+ this.axisConfig.labelPadding,
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
rotation: 0,
@@ -374,7 +372,7 @@ export abstract class BaseAxis implements Axis {
const y = this.boundingRect.y;
drawableElement.push({
type: 'path',
- groupTexts: ['bottom-axis', 'ticks'],
+ groupTexts: ['top-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${
y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
@@ -392,7 +390,7 @@ export abstract class BaseAxis implements Axis {
if (this.showTitle) {
drawableElement.push({
type: 'text',
- groupTexts: ['bottom-axis', 'title'],
+ groupTexts: ['top-axis', 'title'],
data: [
{
text: this.title,
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
deleted file mode 100644
index 8bddf04d0..000000000
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type {
- BoundingRect,
- DrawableElem,
- XYChartConfig,
- XYChartThemeConfig,
-} from '../../Interfaces.js';
-export class PlotBorder {
- constructor(
- private boundingRect: BoundingRect,
- private orientation: XYChartConfig['chartOrientation'],
- private chartThemeConfig: XYChartThemeConfig
- ) {}
-
- getDrawableElement(): DrawableElem[] {
- const { x, y, width, height } = this.boundingRect;
- if (this.orientation === 'horizontal') {
- return [
- {
- groupTexts: ['plot', 'chart-border'],
- type: 'path',
- data: [
- {
- path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${
- y + height
- } L ${x},${y}`,
- strokeFill: this.chartThemeConfig.plotBorderColor,
- strokeWidth: 1,
- },
- ],
- },
- ];
- }
- return [
- {
- groupTexts: ['plot', 'chart-border'],
- type: 'path',
- data: [
- {
- path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${
- y + height
- } L ${x},${y}`,
- strokeFill: this.chartThemeConfig.plotBorderColor,
- strokeWidth: 1,
- },
- ],
- },
- ];
- }
-}
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
index 2d45d795c..370792379 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
@@ -10,7 +10,6 @@ import type {
import type { Axis } from '../axis/index.js';
import type { ChartComponent } from '../../Interfaces.js';
import { LinePlot } from './LinePlot.js';
-import { PlotBorder } from './PlotBorder.js';
import { BarPlot } from './BarPlot.js';
export interface Plot extends ChartComponent {
@@ -55,13 +54,7 @@ export class Plot implements Plot {
if (!(this.xAxis && this.yAxis)) {
throw Error('Axes must be passed to render Plots');
}
- const drawableElem: DrawableElem[] = [
- // ...new PlotBorder(
- // this.boundingRect,
- // this.chartConfig.chartOrientation,
- // this.chartThemeConfig
- // ).getDrawableElement(),
- ];
+ const drawableElem: DrawableElem[] = [];
for (const [i, plot] of this.chartData.plots.entries()) {
switch (plot.type) {
case 'line':
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index 297a2b30d..b585b3ba0 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -34,7 +34,7 @@ let tmpSVGGElem: SVGGType;
let xyChartConfig: XYChartConfig = getChartDefaultConfig();
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
let xyChartData: XYChartData = getChartDefalutData();
-let plotColorPalette = xyChartThemeConfig.plotColorPalette;
+let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
let hasSetXAxis = false;
let hasSetYAxis = false;
@@ -175,7 +175,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
}
function getPlotColorFromPalette(plotIndex: number): string {
- return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)];
+ return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % plotColorPalette.length];
}
function setLineData(title: NormalTextType, data: number[]) {
@@ -221,7 +221,7 @@ const clear = function () {
xyChartConfig = getChartDefaultConfig();
xyChartData = getChartDefalutData();
xyChartThemeConfig = getChartDefaultThemeConfig();
- plotColorPalette = xyChartThemeConfig.plotColorPalette;
+ plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
hasSetXAxis = false;
hasSetYAxis = false;
};
diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
index 19d9d35e4..8f8451d3f 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
@@ -15,11 +15,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
const themeConfig = db.getChartThemeConfig();
const chartConfig = db.getChartConfig();
function getDominantBaseLine(horizontalPos: TextVerticalPos) {
- return horizontalPos === 'top'
- ? 'text-before-edge'
- : horizontalPos === 'bottom'
- ? 'text-after-edge'
- : 'middle';
+ return horizontalPos === 'top' ? 'text-before-edge' : 'middle';
}
function getTextAnchor(verticalPos: TextHorizontalPos) {
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 52b765a60..2820bc791 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -130,20 +130,19 @@ Themes for xychart resides inside xychart attribute so to set the variables use
%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
```
-| Parameter | Description |
-| ---------------- | ----------------------------------------------------- |
-| backgroundColor | Background color of the whole chart |
-| titleColor | Color of the Title text |
-| plotBorderColor | Color of the plot border |
-| 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"] |
+| 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" |
## Example on config and theme
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index db7fd2ba1..663af8501 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -249,27 +249,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
- plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
- xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+ xAxisLabelColor: this.xyChart?.xAxisLabelColor || 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,
+ yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
- plotColorPalette: this.xyChart?.plotColorPalette || [
- '#FFF4DD',
- '#FFD8B1',
- '#FFA07A',
- '#ECEFF1',
- '#D6DBDF',
- '#C3E0A8',
- '#FFB6A4',
- '#FFD74D',
- '#738FA7',
- '#FFFFF0',
- ],
+ plotColorPalette:
+ this.xyChart?.plotColorPalette ||
+ '#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
};
/* requirement-diagram */
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index c4354736b..300cf3036 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -255,27 +255,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
- plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
- xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+ xAxisLabelColor: this.xyChart?.xAxisLabelColor || 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,
+ yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
- plotColorPalette: this.xyChart?.plotColorPalette || [
- '#3498db',
- '#2ecc71',
- '#e74c3c',
- '#f1c40f',
- '#bdc3c7',
- '#ffffff',
- '#34495e',
- '#9b59b6',
- '#1abc9c',
- '#e67e22',
- ],
+ plotColorPalette:
+ this.xyChart?.plotColorPalette ||
+ '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22',
};
/* class */
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index ea3d20a5a..6aa18fcc7 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -276,27 +276,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
- plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
- xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+ xAxisLabelColor: this.xyChart?.xAxisLabelColor || 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,
+ yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
- plotColorPalette: this.xyChart?.plotColorPalette || [
- '#ECECFF',
- '#8493A6',
- '#FFC3A0',
- '#DCDDE1',
- '#B8E994',
- '#D1A36F',
- '#C3CDE6',
- '#FFB6C1',
- '#496078',
- '#F8F3E3',
- ],
+ plotColorPalette:
+ this.xyChart?.plotColorPalette ||
+ '#ECECFF,#8493A6,#FFC3A0,#DCDDE1,#B8E994,#D1A36F,#C3CDE6,#FFB6C1,#496078,#F8F3E3',
};
/* requirement-diagram */
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 0b5300d67..adf337a16 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -244,27 +244,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
- plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
- xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+ xAxisLabelColor: this.xyChart?.xAxisLabelColor || 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,
+ yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
- plotColorPalette: this.xyChart?.plotColorPalette || [
- '#CDE498',
- '#FF6B6B',
- '#A0D2DB',
- '#D7BDE2',
- '#F0F0F0',
- '#FFC3A0',
- '#7FD8BE',
- '#FF9A8B',
- '#FAF3E0',
- '#FFF176',
- ],
+ plotColorPalette:
+ this.xyChart?.plotColorPalette ||
+ '#CDE498,#FF6B6B,#A0D2DB,#D7BDE2,#F0F0F0,#FFC3A0,#7FD8BE,#FF9A8B,#FAF3E0,#FFF176',
};
/* requirement-diagram */
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 26f84c38d..446a9189d 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -275,27 +275,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
- plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
- xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+ xAxisLabelColor: this.xyChart?.xAxisLabelColor || 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,
+ yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
- plotColorPalette: this.xyChart?.plotColorPalette || [
- '#EEE',
- '#6BB8E4',
- '#8ACB88',
- '#C7ACD6',
- '#E8DCC2',
- '#FFB2A8',
- '#FFF380',
- '#7E8D91',
- '#FFD8B1',
- '#FAF3E0',
- ],
+ plotColorPalette:
+ this.xyChart?.plotColorPalette ||
+ '#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0',
};
/* requirement-diagram */