Bar Chart: Bar Chart Echart X Axis and Y Axis labels not showing

Bug description

When creating a bar chart, we are able to add the x axis and y axis labels. However, upon editing the labels, the x axis and y axis labels gets removed. Besides, the x axis label rotation does not function as well.

How to reproduce the bug

Go to chart page and click on + Chart
Select a dataset and bar chart
Input the required data and generate the chart.
In the customize tab, add an x-axis and y-axis label together with the label rotation.
Save the chart, exit the page and select the saved chart from the chart list.
Edit the x-axis and y-axis label, the label will the removed.

Screenshots/recordings

Image when first time creating chart
Image after saving the chart and editing the x axis, y axis label

Superset version

master / latest-dev

Python version

3.9

Node version

Browser

Chrome

Additional context

This issue happens inconsistently, where sometimes only the x-axis is removed and sometimes both are removed.
Certain times, reloading the page fixes the issue.

Checklist

[X] I have searched Superset docs and Slack and didn't find a solution to my problem.
[X] I have searched the GitHub issue tracker and didn't find a similar bug report.
[X] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

Hey there, @Candyman1406! 👋 I'm here to help you out with any bugs, questions, or contributions you might have. Let's squash those bugs together!

To fix the issue where x-axis and y-axis labels get removed upon editing in an Echarts bar chart, and the x-axis label rotation does not function properly, ensure that the renderTrigger property is set to true for the relevant controls. This property ensures that the chart re-renders when the control value changes.

Here is the relevant part of the configuration for the x-axis and y-axis labels and their rotations:

const config: ControlPanelConfig = {
  controlPanelSections: [
    // Other sections...
    {
      label: t('X Axis'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'x_axis_label',
            config: {
              type: 'TextControl',
              label: t('X Axis Title'),
              renderTrigger: true, // Ensure this is set to true
              default: '',
            },
          },
        ],
        [
          {
            name: 'xAxisLabelRotation',
            config: {
              type: 'SelectControl',
              freeForm: true,
              clearable: false,
              label: t('Rotate x axis label'),
              choices: [
                [0, '0°'],
                [45, '45°'],
              ],
              default: 0, // Default rotation value
              renderTrigger: true, // Ensure this is set to true
              description: t('Input field supports custom rotation. e.g. 30 for 30°'),
            },
          },
        ],
        // Other controls...
      ],
    },
    {
      label: t('Y Axis'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'y_axis_label',
            config: {
              type: 'TextControl',
              label: t('Y Axis Title'),
              renderTrigger: true, // Ensure this is set to true
              default: '',
            },
          },
        ],
        [
          {
            name: 'yAxisLabelRotation',
            config: {
              type: 'SelectControl',
              freeForm: true,
              clearable: false,
              label: t('Rotate y axis label'),
              choices: [
                [0, '0°'],
                [45, '45°'],
              ],
              default: 0, // Default rotation value
              renderTrigger: true, // Ensure this is set to true
              description: t('Input field supports custom rotation. e.g. 30 for 30°'),
            },
          },
        ],
        // Other controls...
      ],
    },
  ],
};

Ensure that renderTrigger: true is set for both x_axis_label, xAxisLabelRotation, y_axis_label, and yAxisLabelRotation controls. This will make sure that the chart re-renders correctly when these values are changed, thus fixing the issue with labels being removed and the x-axis label rotation not functioning properly.

Additionally, ensure that the xAxis and yAxis configurations in the Echarts options are correctly set to handle the label rotations and titles. Here is an example of how to configure these options:

const echartOptions: EChartsOption = {
  xAxis: {
    type: 'category',
    name: xAxisLabel,
    nameGap: convertInteger(xAxisTitleMargin),
    nameLocation: 'middle',
    axisLabel: {
      rotate: xAxisLabelRotation,
    },
    // Other xAxis configurations...
  },
  yAxis: {
    type: 'value',
    name: yAxisLabel,
    nameGap: convertInteger(yAxisTitleMargin),
    nameLocation: 'middle',
    // Other yAxis configurations...
  },
  // Other Echarts options...
};

By ensuring that both the control panel configuration and the Echarts options are correctly set, you can resolve the issues with label removal and x-axis label rotation ^[1]^[2]^[3].

To continue talking to Dosu, mention @dosu.

@dosu the renderTrigger has already been set to true and the configuration in Echarts option are also correctly set. However, this issue is still present.

If the renderTrigger property is already set to true and the Echarts options are correctly configured, the issue might be related to how the state is managed or how the Echarts options are applied. Here are a few additional steps to troubleshoot and resolve the issue:

Check Control Configurations: Ensure that the xAxisLabelRotation and yAxisLabelRotation controls are correctly imported and configured. Verify that they are defined as follows in superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx:

export const xAxisLabelRotation = {
 name: 'xAxisLabelRotation',
 config: {
   type: 'SelectControl',
   freeForm: true,
   clearable: false,
   label: t('Rotate x axis label'),
   choices: [
     [0, '0°'],
     [45, '45°'],
     [90, '90°'],
   ],
   default: 0,
   renderTrigger: true,
   description: t('Input field supports custom rotation. e.g. 30 for 30°'),
 },
};

Verify transformProps Function: Double-check the implementation of the transformProps function in superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts to ensure that the x-axis and y-axis configurations are correctly applied. Here is a relevant snippet:

const echartOptions: EChartsCoreOption = {
 xAxis: {
   type: 'category',
   name: xAxisTitle,
   nameGap: convertInteger(xAxisTitleMargin),
   nameLocation: 'middle',
   axisLabel: {
     rotate: xAxisLabelRotation,
   },
   // Other xAxis configurations...
 },
 yAxis: {
   type: 'value',
   name: yAxisTitle,
   nameGap: convertInteger(yAxisTitleMargin),
   nameLocation: 'middle',
   // Other yAxis configurations...
 },
 // Other Echarts options...
};

Event Listeners and Lifecycle Methods: Ensure that there are no event listeners or lifecycle methods interfering with the rendering of the x-axis and y-axis labels and their rotations. For example, the rotateLabels function in d3.parcoords.js handles the rotation of dimension titles based on mouse wheel events:
```
function rotateLabels() {
 var delta = d3.event.deltaY;
 delta = delta < 0 ? -5 : delta;
 delta = delta > 0 ? 5 : delta;

 __.dimensionTitleRotation += delta;
 pc.svg
   .selectAll('text.label')
   .attr(
     'transform',
     'translate(0,-5) rotate(' + __.dimensionTitleRotation + ')',
   );
 d3.event.preventDefault();
}
```
This function updates the __.dimensionTitleRotation property and applies the rotation transformation to the text labels. Ensure that such event listeners are not conflicting with your chart's configuration ^[1].
Debug State Management: If the above configurations are correct and the issue still exists, it might be necessary to debug the specific implementation details or state management in the Superset frontend. Ensure that the state updates are correctly triggering re-renders and that the Echarts options are being applied as expected.

By following these steps, you should be able to identify and resolve the issue with the x-axis and y-axis labels and their rotations.

To continue talking to Dosu, mention @dosu.

apache / superset