How to set the x and y axis labels and bar size in vchart bar chart?

Title

Description

I am using vchart bar chart and I want to set the font size of the x and y axis labels and the size of the bars. However, I couldn't find the corresponding configuration options in the documentation. I tried some parameters, but none of them worked. How can I set them?

Solution

The font size of the x and y axis labels and the size of the bars in vchart bar chart can be configured through the style field of the axis label. At the same time, the size of the bars can be adjusted by adjusting the width of the bar chart.

Sample Code

const spec = {
  type: 'bar',
  data: {
    values: [
      {
        time: '2:00',
        value: 8
      },
      {
        time: '4:00',
        value: 9
      },
      {
        time: '6:00',
        value: 11
      },
      {
        time: '8:00',
        value: 14
      },
      {
        time: '10:00',
        value: 16
      },
      {
        time: '12:00',
        value: 17
      },
      {
        time: '14:00',
        value: 17
      },
      {
        time: '16:00',
        value: 16
      },
      {
        time: '18:00',
        value: 15
      }
    ]
  },
  barWidth: '50%',
  barMinWidth: 20,
  barMaxWidth: 50,
  xField: 'time',
  yField: 'value',
  axes: [
    {
      orient: 'left',
      label: {
        formatMethod(val) {
          return 
${(val * 100).toFixed(2)}%
;
        },
        style: { fontSize: 20 }
      }
    },
    { orient: 'bottom', label: { style: { fontSize: 20 } } }
  ]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;