Timeseries chart y/x-axis label color

[alex1404]

Hi Superset users,
Any idea how we can modify the color of the y/a-axis labels? (Timeseries chart , E-chart)

[dosubot[bot]]

Hi @alex1404! I'm here to help you with any bugs, questions, or contributions while you wait for a human maintainer. Just give me a shout if you need anything!

To change the color of the y-axis and x-axis labels in an E-charts timeseries chart in Apache Superset, you need to modify the axisLabel property for both the xAxis and yAxis configurations in the transformProps function. Specifically, you can set the color attribute within the axisLabel object.

Here is how you can do it:

const echartOptions: EChartsCoreOption = {
  useUTC: true,
  grid: {
    ...defaultGrid,
    ...chartPadding,
  },
  xAxis: {
    type: xAxisType,
    name: xAxisTitle,
    nameGap: convertInteger(xAxisTitleMargin),
    nameLocation: 'middle',
    axisLabel: {
      formatter: xAxisFormatter,
      rotate: xAxisLabelRotation,
      color: 'desired_color', // Set your desired color here
    },
    minorTick: { show: minorTicks },
    minInterval:
      xAxisType === AxisType.Time && timeGrainSqla
        ? TIMEGRAIN_TO_TIMESTAMP[timeGrainSqla]
        : 0,
    ...getMinAndMaxFromBounds(
      xAxisType,
      truncateXAxis,
      xAxisMin,
      xAxisMax,
      seriesType === EchartsTimeseriesSeriesType.Bar ||
        seriesTypeB === EchartsTimeseriesSeriesType.Bar
        ? EchartsTimeseriesSeriesType.Bar
        : undefined,
    ),
  },
  yAxis: [
    {
      ...defaultYAxis,
      type: logAxis ? 'log' : 'value',
      min: yAxisMin,
      max: yAxisMax,
      minorTick: { show: minorTicks },
      minorSplitLine: { show: minorSplitLine },
      axisLabel: {
        formatter: getYAxisFormatter(
          metrics,
          !!contributionMode,
          customFormatters,
          formatter,
          yAxisFormat,
        ),
        color: 'desired_color', // Set your desired color here
      },
      scale: truncateYAxis,
      name: yAxisTitle,
      nameGap: convertInteger(yAxisTitleMargin),
      nameLocation: yAxisTitlePosition === 'Left' ? 'middle' : 'end',
      alignTicks,
    },
    {
      ...defaultYAxis,
      type: logAxisSecondary ? 'log' : 'value',
      min: minSecondary,
      max: maxSecondary,
      minorTick: { show: minorTicks },
      splitLine: { show: false },
      minorSplitLine: { show: minorSplitLine },
      axisLabel: {
        formatter: getYAxisFormatter(
          metricsB,
          !!contributionMode,
          customFormattersSecondary,
          formatterSecondary,
          yAxisFormatSecondary,
        ),
        color: 'desired_color', // Set your desired color here
      },
      scale: truncateYAxis,
      name: yAxisTitleSecondary,
      alignTicks,
    },
  ],
  // other configurations...
};

Replace 'desired_color' with the color you want to use for the axis labels. This will change the color of both the x-axis and y-axis labels in your E-charts timeseries chart ^[1][2].

To continue talking to Dosu, mention @dosu.

[ltf-space]

Hello, have you solved your problem? I am also facing this problem.