DEV Community

方帅
方帅

Posted on

In the VTable integrated VChart chart scene, how to deal with the truncation of dots at the edge?

Description
In the VTable integrated VChart chart scenario, how to avoid the edge points being truncated when drawing points on the chart.

Image description

Solution
Configure innerOffset on the axes axis. After adding it as above, there will be a certain distance between the elements on the chart and the edge of the table.

Image description

Code Example

const option = {
axes: [
{
orient: 'left',
type: 'linear',
innerOffset: {
top: 4,
bottom: 4,
}
},
{
orient: 'bottom',
type: 'band',
innerOffset: {
left: 4,
right: 4,
}
}
]
...
}

const tableInstance = new VTable.ListTable(container, option);
Results
Online effect reference:https://visactor.io/vtable/demo/table-type/pivot-chart-scatter

Image description

Related Documents
Related api:https://visactor.io/vtable/option/PivotTable#axes
github:https://github.com/VisActor/VTable

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay