Chart colors for label with axis and y axis, colors does not seem to work as configured.

[manulsan]

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
  

Thank you advanced.

[graphieros]

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.

[manulsan]

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;
});

[graphieros]

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.

[manulsan]

Thank you

Blow make a good effect and good works.

   theme: isDarkMode.value ? "hack" : "" 

• Applied effects
  

[graphieros]

It looks good :)