How to configure the Y-axis with both title and unit in the VChart line chart?

Problem description

In the line chart, the Y-axis has both titles and units. How to configure them?

Solution

• Axis titles can be configured through the axes.titleproperty
• You can configure axes.unitto set the unit of the axis component

 axes: [
    {
      orient: 'left',
      title:{
        visible: true,
        text:'This is axis title'
      },
      unit:{
        visible: true,
        text:'Axis unit'
      }
    }
  ],

Code example

🔔 The following code can be copied and pasted into the editor to see the effect.

const spec = {
  type: 'bar',
  width: 450,
  height:300,
  xField: 'month',
  yField: 'sales',
  axes: [
    {
      orient: 'left',
      title:{
        visible: true,
        text:'This is axis title'
      },
      unit:{
        visible: true,
        text:'Axis unit'
      }
    }
  ],
  data: [
    {
      id: 'barData',
      values: [
        { month: 'Monday', sales: 22 },
        { month: 'Tuesday', sales: 13 },
        { month: 'Wednesday', sales: 25 },
        { month: 'Thursday', sales: 29 },
        { month: 'Friday', sales: 32 }
      ]
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Results show

Related Documents

• github：https://github.com/VisActor/VChart
• Axis unit configuration unit: https://visactor.io/vchart/option/barChart-axes-linear#unit