Adyen / lume

Lume is a component library for visual representations of data, built for Vue with D3.
https://lumedataviz.com
MIT License
37 stars 1 forks source link

Axis tick labels are rendered outside of the chart container in some cases #375

Closed bponomarenko closed 6 months ago

bponomarenko commented 6 months ago

Problem description

I'm using Stacked Bar Chart vue2 component (from @adyen/lume@1.6.5) with no data (empty values array) in situations when there is no data available yet (it should be possible accordingly to documentation, at least it doesn't state otherwise). In such situation I'd like to render empty chart with 7 columns for each of the past 7 days on the x axis, and 10 ticks for values from 0 to 10 on the y axis.

However when I try to render chart for such use case, tick labels on the x axis are rendered partially outside of the chart container. Here is component that can be used to reproduce the issue:

<template>
  <lume-stacked-bar-chart
    :labels="['1', '2', '3', '4', '5', '6', '7']"
    :data="[{ values: [] }]"
    :y-scale="yScale"
  />
</template>

<script>
import { scaleLinear } from 'd3';
import { LumeStackedBarChart } from '@adyen/lume';

export default {
  components: { LumeStackedBarChart },
  setup() {
    const yScale = (data, labels, size) => scaleLinear().domain([0, 10]).range([0, size.height]);
    return { yScale };
  },
};
</script>

Reproduction URL

No response

Reproduction steps

  1. Create new component based on the example from the "Problem description" section
  2. Render it in the browser. Chart would be rendered like on the example below, with x axis tick labels partially visible (only 4 -7 values are visible) Screenshot 2024-01-02 at 15 27 56

Expected behavior

Tick labels on both axis are correctly aligned to the chart container, so all 1-7 values are visible on the x axis.

Screenshots

No response

Logs

No response

Browsers

Chrome

OS

No response

Validations