Cookie Consent by Free Privacy Policy Generator 📌 How to format axis labels in @visactor/vchart?


✅ How to format axis labels in @visactor/vchart?


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Question Description

As shown in the figure, when the axis label value is inaccurate with a very long decimal point, can it be formatted?

Image description

Solution

The problem of floating-point precision here is due to the addition operation of floating-point numbers when realizing the alignment of the axis scale. To improve the readability of axis labels, you can format the axis labels through label.formatMethod.

Image description

Code Example

const spec = {
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      values: [
        { x: 'Monday', type: 'Breakfast', y: 0.1633 },
      ]
    },
    {
      id: 'id1',
      values: [
        { x: 'Monday', type: 'Drink', y: -0.3455 },
      ]
    }
  ],
  series: [
    {
      type: 'line',
      id: 'line',
      dataIndex: 0,
      label: { visible: true },
      seriesField: 'type',
      dataIndex: 0,
      xField: ['x', 'type'],
      yField: 'y'
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0], id: 'left' },
    {
      orient: 'right',
      seriesId: ['line'],
      grid: { visible: false },
      label: {
        formatMethod: (label) => {
          return Math.round(label * 100) / 100;
        }
      },
      sync: {
        axisId: 'left',
        tickAlign: true
      }
    },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
  legends: {
    visible: true,
    orient: 'bottom'
  }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!  
window['vchart'] = vchart;

Result Display

Image description

Related Documentation

...











matomo

Datei nicht gefunden!