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.title
property - You can configure
axes.unit
to 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
Top comments (0)