-
-
-
-
-
{{ legendItem.name }}
+
+
+
+
+
+
+
+
+
+ {{ legendItem.name }}
+
+
+
+
+
-
-
-
diff --git a/src/useConfig.js b/src/useConfig.js
index c1ed110b..784ec490 100755
--- a/src/useConfig.js
+++ b/src/useConfig.js
@@ -313,7 +313,10 @@ export function useConfig() {
width: 800,
padding: PADDING([12, 12, 12, 12]),
title: TITLE,
- legend: LEGEND,
+ legend: {
+ ...LEGEND,
+ position: 'bottom'
+ },
zoom: ZOOM,
tooltip: {
...TOOLTIP,
@@ -618,7 +621,8 @@ export function useConfig() {
legend: {
color: COLOR_BLACK,
show: true,
- fontSize: FONT._14
+ fontSize: FONT._14,
+ position: 'bottom', // bottom | top
},
title: {
...TITLE,
@@ -897,7 +901,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showPercentage: true,
- showValue: true
+ showValue: true,
+ position: 'bottom'
},
tooltip: {
...TOOLTIP,
@@ -972,7 +977,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showValue: true,
- showPercentage: true
+ showPercentage: true,
+ position: 'bottom'
},
title: TITLE,
tooltip: {
@@ -1064,7 +1070,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showValue: true,
- showPercentage: true
+ showPercentage: true,
+ position: 'bottom'
}
}
},
@@ -1153,7 +1160,8 @@ export function useConfig() {
},
legend: {
...LEGEND,
- roundingPercentage: 0
+ roundingPercentage: 0,
+ position: 'bottom'
}
}
},
@@ -1299,7 +1307,10 @@ export function useConfig() {
roundingValue: 0,
showShape: true,
},
- legend: LEGEND
+ legend: {
+ ...LEGEND,
+ position: 'bottom'
+ }
}
},
table: {
@@ -1760,7 +1771,8 @@ export function useConfig() {
legend: {
...LEGEND,
roundingValue: 0,
- roundingPercentage: 0
+ roundingPercentage: 0,
+ position: 'bottom'
},
tooltip: {
...TOOLTIP,
@@ -2179,7 +2191,8 @@ export function useConfig() {
title: TITLE,
legend: {
...LEGEND,
- roundingValue: 0
+ roundingValue: 0,
+ position: 'bottom'
},
tooltip: {
...TOOLTIP,
@@ -2788,6 +2801,7 @@ export function useConfig() {
legendFontSize: FONT._12,
legendIcon: 'circleFill',
legendIconSize: FONT._12,
+ legendPosition: 'bottom',
lineAnimated: true,
lineSmooth: true,
lineStrokeWidth: 2,
@@ -3157,7 +3171,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showValue: true,
- showPercentage: true
+ showPercentage: true,
+ position: 'bottom'
},
title: TITLE,
tooltip: {
@@ -3339,7 +3354,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showValue: true,
- showPercentage: true
+ showPercentage: true,
+ position: 'bottom'
}
}
},
@@ -3425,7 +3441,8 @@ export function useConfig() {
legend: {
...LEGEND,
roundingValue: 0,
- roundingPercentage: 0
+ roundingPercentage: 0,
+ position: 'bottom'
}
}
},
@@ -3590,7 +3607,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showValue: true,
- showPercentage: true
+ showPercentage: true,
+ position: 'bottom'
},
title: TITLE,
tooltip: {
@@ -3666,7 +3684,8 @@ export function useConfig() {
roundingValue: 0,
roundingPercentage: 0,
showValue: true,
- showPercentage: true
+ showPercentage: true,
+ position: 'bottom'
},
title: TITLE,
tooltip: {
@@ -3966,7 +3985,8 @@ export function useConfig() {
labelEnd: 'end',
labelPositive: 'positive', // v3
labelNegative: 'negative', // v3
- labelNeutral: 'neutral' // v3
+ labelNeutral: 'neutral', // v3
+ position: 'bottom'
},
title: TITLE
}
@@ -4304,7 +4324,10 @@ export function useConfig() {
showHorizontalSelector: false,
},
tooltip: TOOLTIP,
- legend: LEGEND,
+ legend: {
+ ...LEGEND,
+ position: 'bottom',
+ },
title: TITLE,
grid: {
y: {
@@ -4445,6 +4468,7 @@ export function useConfig() {
},
legend: {
...LEGEND,
+ position: 'bottom'
},
nodes: {
gap: 10,
@@ -4572,7 +4596,10 @@ export function useConfig() {
}
},
title: TITLE,
- legend: LEGEND,
+ legend: {
+ ...LEGEND,
+ position: 'bottom'
+ },
tooltip: TOOLTIP
}
},
@@ -5549,7 +5576,8 @@ export function useConfig() {
},
legend: {
...LEGEND,
- roundingValue: 0
+ roundingValue: 0,
+ position: 'bottom'
},
}
}
@@ -5806,6 +5834,7 @@ export function useConfig() {
},
legend: {
...LEGEND,
+ position: 'bottom'
},
title: TITLE,
tooltip: TOOLTIP
@@ -5973,7 +6002,10 @@ export function useConfig() {
showMinimap: true
},
title: TITLE,
- legend: LEGEND
+ legend: {
+ ...LEGEND,
+ position: 'bottom'
+ }
}
},
table: {
@@ -6189,7 +6221,10 @@ export function useConfig() {
chart: {
backgroundColor: COLOR_WHITE,
color: COLOR_BLACK,
- legend: LEGEND,
+ legend: {
+ ...LEGEND,
+ position: 'bottom'
+ },
title: TITLE,
arcs: {
innerRadiusRatio: 1,
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 77f61758..a2479614 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -458,6 +458,7 @@ declare module "vue-data-ui" {
roundingPercentage?: number;
showValue?: boolean;
showPercentage?: boolean;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
tooltip?: ChartTooltip & {
@@ -621,6 +622,7 @@ declare module "vue-data-ui" {
roundingPercentage?: number;
showValue?: boolean;
showPercentage?: boolean;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
tooltip?: ChartTooltip & {
@@ -1199,6 +1201,7 @@ declare module "vue-data-ui" {
backgroundColor?: string;
roundingPercentage?: number;
roundingValue?: number;
+ position?: 'bottom' | 'top';
};
};
};
@@ -1537,6 +1540,7 @@ declare module "vue-data-ui" {
roundingValue?: number;
showValue?: boolean;
showPercentage?: boolean;
+ position?: 'bottom' | 'top';
};
};
};
@@ -1769,6 +1773,7 @@ declare module "vue-data-ui" {
roundingPercentage?: number;
showValue?: boolean;
showPercentage?: boolean;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
tooltip?: ChartTooltip & {
@@ -2910,6 +2915,7 @@ declare module "vue-data-ui" {
legend?: ChartBaseLegend & {
backgroundColor?: string;
roundingValue?: number;
+ position?: 'bottom' | 'top';
};
tooltip?: ChartTooltip & {
roundingValue?: number;
@@ -3358,6 +3364,7 @@ declare module "vue-data-ui" {
color?: string;
show?: boolean;
fontSize?: number;
+ position?: 'bottom' | 'top';
};
title?: {
show?: boolean;
@@ -3715,6 +3722,7 @@ declare module "vue-data-ui" {
roundingPercentage?: number;
showPercentage?: boolean;
showValue?: boolean;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
tooltip?: ChartTooltip & {
@@ -3896,6 +3904,7 @@ declare module "vue-data-ui" {
roundingPercentage?: number;
showValue?: boolean;
showPercentage?: boolean;
+ position?: 'bottom' | 'bottom';
};
title?: ChartTitle;
tooltip?: ChartTooltip & {
@@ -4095,6 +4104,7 @@ declare module "vue-data-ui" {
roundingPercentage?: number;
showValue?: boolean;
showPercentage?: boolean;
+ position?: 'bottom' | 'top';
};
};
};
@@ -4237,6 +4247,7 @@ declare module "vue-data-ui" {
legend?: ChartBaseLegend & {
backgroundColor?: string;
roundingPercentage?: number;
+ position?: 'bottom' | 'top';
};
};
};
@@ -4464,6 +4475,7 @@ declare module "vue-data-ui" {
};
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top'
};
};
};
@@ -4942,6 +4954,7 @@ declare module "vue-data-ui" {
backgroundColor?: string;
roundingValue?: number;
roundingPercentage?: number;
+ position?: 'bottom' | 'top';
};
tooltip?: ChartTooltip & {
showValue?: boolean;
@@ -6024,6 +6037,7 @@ declare module "vue-data-ui" {
legendFontSize?: number;
legendIcon?: VueUiIconName;
legendIconSize?: number;
+ legendPosition?: 'bottom' | 'top';
lineAnimated?: boolean;
lineSmooth?: boolean;
lineStrokeWidth?: number;
@@ -6574,6 +6588,7 @@ declare module "vue-data-ui" {
labelPositive?: string; // v3
labelNegative?: string; // v3
labelNeutral?: string; // v3
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
};
@@ -6802,6 +6817,7 @@ declare module "vue-data-ui" {
show?: boolean;
fontSize?: number;
bold?: boolean;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
grid?: {
@@ -6989,6 +7005,7 @@ declare module "vue-data-ui" {
color?: string;
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top';
};
tooltip?: ChartTooltip & {
showPercentage?: boolean;
@@ -7195,6 +7212,7 @@ declare module "vue-data-ui" {
title?: ChartTitle;
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top';
};
tooltip?: ChartTooltip & {
customFormat?:
@@ -7543,6 +7561,7 @@ declare module "vue-data-ui" {
title?: ChartTitle;
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top';
};
zoom?: ChartZoom;
tooltip?: ChartTooltip & {
@@ -7776,6 +7795,7 @@ declare module "vue-data-ui" {
title?: ChartTitle;
legend?: ChartBaseLegend & {
roundingValue?: number;
+ position?: 'bottom' | 'top';
};
};
}
@@ -8077,6 +8097,7 @@ declare module "vue-data-ui" {
};
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
tooltip?: ChartTooltip & {
@@ -8356,6 +8377,7 @@ declare module "vue-data-ui" {
title?: ChartTitle;
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top';
};
}
};
@@ -8663,6 +8685,7 @@ declare module "vue-data-ui" {
color?: string;
legend?: ChartBaseLegend & {
backgroundColor?: string;
+ position?: 'bottom' | 'top';
};
title?: ChartTitle;
arcs?: {