diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md index dec16a518..742a4f18a 100644 --- a/docs/syntax/xyChart.md +++ b/docs/syntax/xyChart.md @@ -138,7 +138,7 @@ xychart ## Chart Theme Variables -Themes for xychart resides inside xychart attribute so to set the variables use this syntax: +Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax: ```yaml --- @@ -163,6 +163,52 @@ config: | yAxisLineColor | Color of the y-axis line | | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | +### Setting Colors for Lines and Bars + +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). + +```mermaid-example +--- +config: + themeVariables: + xyChart: + plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000' +--- +xychart +title "Different Colors in xyChart" +x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"] +y-axis "valuesY" 0 --> 50 +%% Black line +line [10,20,30,40] +%% Blue bar +bar [20,30,25,35] +%% Green bar +bar [15,25,20,30] +%% Red line +line [5,15,25,35] +``` + +```mermaid +--- +config: + themeVariables: + xyChart: + plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000' +--- +xychart +title "Different Colors in xyChart" +x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"] +y-axis "valuesY" 0 --> 50 +%% Black line +line [10,20,30,40] +%% Blue bar +bar [20,30,25,35] +%% Green bar +bar [15,25,20,30] +%% Red line +line [5,15,25,35] +``` + ## Example on config and theme ```mermaid-example diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md index 4154fb2f0..cfff201d3 100644 --- a/packages/mermaid/src/docs/syntax/xyChart.md +++ b/packages/mermaid/src/docs/syntax/xyChart.md @@ -126,7 +126,7 @@ xychart ## Chart Theme Variables -Themes for xychart resides inside xychart attribute so to set the variables use this syntax: +Themes for xychart reside inside the `xychart` attribute, allowing customization through the following syntax: ```yaml --- @@ -151,6 +151,31 @@ config: | yAxisLineColor | Color of the y-axis line | | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" | +### Setting Colors for Lines and Bars + +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). + +```mermaid-example +--- +config: + themeVariables: + xyChart: + plotColorPalette: '#000000, #0000FF, #00FF00, #FF0000' +--- +xychart +title "Different Colors in xyChart" +x-axis "categoriesX" ["Category 1", "Category 2", "Category 3", "Category 4"] +y-axis "valuesY" 0 --> 50 +%% Black line +line [10,20,30,40] +%% Blue bar +bar [20,30,25,35] +%% Green bar +bar [15,25,20,30] +%% Red line +line [5,15,25,35] +``` + ## Example on config and theme ```mermaid-example