-
Notifications
You must be signed in to change notification settings - Fork 97
Chart colors for label with axis and y axis, colors does not seem to work as configured. #42
-
While testing at the Chart Builder,
it seems to work at https://vue-data-ui.graphieros.com/chart-builder
- While applying "Dark Mode", chart axis's label is not working as configured,
- My changes : theme is applied. -
theme: isDarkMode.value ? 'hack' : 'zen', // 'hack', // zen, hack , concrete
- Picture
image
Thank you advanced.
Beta Was this translation helpful? Give feedback.
All reactions
Ok I see what you mean now.
It is totally normal: the "zen" theme is designed to be displayed without axis labels (zen = no interference ^^)
This should be mentioned in the documentation.
What you can do for your theme is :
theme: isDarkMode.value ? "hack" : ""
You can adapt the config so that when it is not in dark mode, you can apply your preferred colors.
You can also set config.customPalette to the colors used for the zen mode, so they are applied when isDarkMode is false:
// Color palette of zen mode customPalette : [ "#B9B99D", "#E0CFC3", "#DFCA99", "#DCB482", "#C09E85", "#8F837A", "#858480", "#B0B9A8", "#606C5A",
Replies: 2 comments 3 replies
-
Hi @manulsan
What is the problem exactly ? Please be more specific.
Please share the config object you are using so I can reproduce the issue.
Beta Was this translation helpful? Give feedback.
All reactions
-
Labels for X,Y colors seems to be fixed.
Background color is back, label texts are seen because color is grey-5 or
While back-ground color is like white smoke, labels are not seen.
- "Below is the configuration-
return <VueUiQuickChartConfig>{
useCssAnimation: true,
theme: isDarkMode.value ? 'hack' : 'zen', // 'hack', // zen, hack , concrete
chart: {
fontFamily: 'inherit',
backgroundColor: '#FFFFFF',
color: '#1A1A1A',
height: 180,
width: 360,
zoom: {
show: false,
color: '#CCCCCC',
highlightColor: '#4A4A4A',
fontSize: 14,
},
padding: {
top: 15, //36,
right: 5, //24,
bottom: 40, //48,
left: 25, //48,
},
highlighter: {
color: '#1A1A1A',
opacity: 5,
useLine: false,
lineDasharray: 2,
lineWidth: 1,
},
timeTag: {
show: false,
backgoundColor: '#e1e5e8',
color: '#1A1A1A',
fontSize: 12,
circleMarker: {
color: '#1A1A1A',
radius: 3,
},
},
highlightArea: {
show: false,
from: 0,
to: 0,
color: '#1A1A1A',
opacity: 20,
caption: {
text: 'Caption',
fontSize: 20,
color: '#1A1A1A',
bold: false,
offsetY: 0,
width: 'auto',
padding: 3,
textAlign: 'center',
},
},
grid: {
stroke: '#e1e5e8',
showVerticalLines: false,
labels: {
show: true,
color: '#0A0A0A',
fontSize: 12,
axis: {
yLabel: '',
xLabel: '',
fontSize: 12,
},
xAxisLabels: {
show: true,
color: '#0A0A0A',
//values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
values: xLabels,
fontSize: 12,
showOnlyFirstAndLast: false,
yOffset: 0,
rotation: -30,
},
xAxis: {
showBaseline: true,
},
yAxis: {
commonScaleSteps: 10,
useIndividualScale: false,
stacked: false,
gap: 12,
labelWidth: 40,
},
},
},
labels: {
fontSize: 10,
prefix: '',
suffix: '',
},
legend: {
show: false,
color: '#1A1A1A',
fontSize: 16,
},
title: {
show: false,
text: 'Title',
color: '#1A1A1A',
fontSize: 20,
bold: true,
offsetX: 0,
offsetY: 0,
subtitle: {
text: '',
color: '#CCCCCC',
fontSize: 16,
},
},
tooltip: {
show: true,
showValue: true,
showPercentage: false,
color: '#1A1A1A',
backgroundColor: '#FFFFFF',
roundingValue: 0,
roundingPercentage: 0,
borderRadius: 4,
borderColor: '#e1e5e8',
borderWidth: 1,
},
userOptions: {
show: false,
},
},
bar: {
borderRadius: 2,
useGradient: true,
labels: {
show: true,
offsetY: -8,
rounding: 0,
color: '#1A1A1A',
},
serieName: {
show: false,
offsetY: -6,
useAbbreviation: true,
abbreviationSize: 3,
useSerieColor: true,
color: '#1A1A1A',
},
periodGap: 0.1,
border: {
useSerieColor: false,
strokeWidth: 1,
stroke: '#FFFFFF',
},
},
line: {
radius: 6,
useGradient: true,
strokeWidth: 2,
labels: {
show: true,
offsetY: -8,
rounding: 0,
color: '#1A1A1A',
},
area: {
useGradient: true,
opacity: 20,
},
},
plot: {
radius: 6,
useGradient: true,
strokeWidth: 2,
labels: {
show: true,
offsetY: -8,
rounding: 0,
color: '#1A1A1A',
},
},
showTable: false,
table: {
responsiveBreakpoint: 400,
rounding: 0,
sparkline: true,
columnNames: {
period: 'Period',
total: 'Total',
},
th: {
backgroundColor: '#FAFAFA',
color: '#1A1A1A',
outline: '',
},
td: {
backgroundColor: '#FAFAFA',
color: '#1A1A1A',
outline: '',
},
},
};
//return tmp;
});
Beta Was this translation helpful? Give feedback.
All reactions
-
Ok I see what you mean now.
It is totally normal: the "zen" theme is designed to be displayed without axis labels (zen = no interference ^^)
This should be mentioned in the documentation.
What you can do for your theme is :
theme: isDarkMode.value ? "hack" : ""
You can adapt the config so that when it is not in dark mode, you can apply your preferred colors.
You can also set config.customPalette to the colors used for the zen mode, so they are applied when isDarkMode is false:
// Color palette of zen mode customPalette : [ "#B9B99D", "#E0CFC3", "#DFCA99", "#DCB482", "#C09E85", "#8F837A", "#858480", "#B0B9A8", "#606C5A", "#5E5E5E", "#4F5B75", "#647393", "#818EA9", "#9FA9BE", "#BBC4D3", "#DCDFE7", "#928A98", "#8A9892", "#B1A7AD", "#C5B8A7", "#EBD6CC", "#D7E0D2", "#E0D2D7", "#E0DBD2", "#D2E0DB", "#DBD2E0", "#C1B7A5", "#A5AFC1", "#E0DBD2", "#D2D7E0", "#F7EDE2", "#97ACB7", "#C4CBBC", "#C3C5C5", "#A0AC94" ]
I know this represents more work, but it will guarantee the expected results in the end.
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank you
Blow make a good effect and good works.
theme: isDarkMode.value ? "hack" : ""
- Applied effects
image
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
It looks good :)
Beta Was this translation helpful? Give feedback.