Tick labels visibility with culling on

[creage]

Description

We are using Spline widget with timeseries to display some data within a date range. We are also using culling: { max: 5 } to limit the amount of labels to display.

The issue is that a logic behind deciding which label to show is a bit broken. We'd like to have first and last labels to be always visible, and the rest computed based on the max value ( 5 - 2 = 3 more to display).

Currently it picks first 5 items from the beginning, hiding the last tick explicitly by display: none:

What we need is to make first (0) and the last tick (25) visible, as it is important to see the beginning and the end of the range.

Steps to check or reproduce

// base css
import 'billboard.js/dist/theme/insight.css';
import bb from 'billboard.js';

// for ESM environment, need to import modules as:
// import bb, {spline} from "billboard.js"

var chart = bb.generate({
  data: {
    columns: [
      [
        'x',
        30,
        200,
        100,
        400,
        150,
        250,
        30,
        200,
        100,
        400,
        150,
        250,
        30,
        200,
        100,
        400,
        150,
        250,
        30,
        200,
        100,
        400,
        150,
        250,
      ],
    ],
    type: 'spline', // for ESM specify as: spline()
  },

  axis: {
    x: {
      tick: {
        culling: {
          max: 5,
        },
      },
    },
  },
  bindto: '#splineChart',
});

[netil]

Hi @creage, tick.culling option controls the visibility simply by applying display property. Having this in mind, if you need to make some specific placed ticks (in this case, first & last), you can do by adding some simple css rule.

.bb-axis-x .tick:first-of-type text,
.bb-axis-x .tick:last-of-type text {
    display: inherit !important;
}

[creage]

@netil Well, sure I can do that, but I'm sure this is something that has to be done by the library, not by me trying to hack the default behavior.

[netil]

It can't be provided everything as options, because the needs aren't same. The benefit of being svg shines, because literally every elements can be customized even isn't provided as an official option.