Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Allow blank axis labels #15

Open
cnewtonMYCM opened this issue Nov 16, 2023 · 4 comments
Open

Feature: Allow blank axis labels #15

cnewtonMYCM opened this issue Nov 16, 2023 · 4 comments

Comments

@cnewtonMYCM
Copy link

cnewtonMYCM commented Nov 16, 2023

The Context

We have a Chart with the following setup below.

var chart = JSC.chart('chartDiv', {
  debug: true,
  type: 'area',
  legend_visible: false,
  series: [
    {
      type: 'line',
      points: [
        ['January', 29.9],
        [' ', 71.5],
        ['March', 106.4],
        ['April', 129.2],
        ['May', 144.0],
        ['June', 176.0],
        [' ', 36.3]
      ]
    }
  ]
});

It has empty spaces for the labels where "February" and "July" would've been.

The Problem

The Chart doesn't account well for these empty spaces because the last data point is pulled back to where February would've been because it treats the empty space labels as the same data point.
image

Setting the label to false or null doesn't fix this.

Adding an extra space so the last data point's label becomes two spaces ' ' is an unideal solution because, when the Chart is squished, it'll overwrite other labels that actually have text - labels that have text should always be preferred over blank labels.

The Feature Request

  • Allow for blank axis labels that do not get pulled back to previous points (always plot them onto the next point)
  • Ensure these blank labels do not overwrite other labels that actually have text when the Chart is squished down.

Why would we want this feature?

Charts with lots of data points can become confusing to look at. Allowing for data points with y=0 to have blank labels would add clarity.

Please let me know if you need any more information.
Thank you for your time.

@arthurPuszynski
Copy link
Contributor

Hello,

Here's an alternate way to achieve this.

// JS
var chart = JSC.chart('chartDiv', {
  debug: true,
  type: 'area',
  legend_visible: false,
  xAxis:{
    categories:['January',' ','March','April','May','June',' ']
  },
  series: [
    {
      type: 'line',
      points: [
        {x:0, y: 29.9},
        {x:1, y: 71.5},
        {x:2, y: 106.4},
        {x:3, y: 129.2},
        {x:4, y: 144.0},
        {x:5, y: 176.0},
        {x:6, y: 36.3}
      ]
    }
  ]
});

You can view the result in this code pen: https://codepen.io/jsblog/pen/GRzyvNd

Please let me know if this does not work for your situation.

@cnewtonMYCM
Copy link
Author

That's helpful, thank you! Does this method also prioritise showing text labels over blank labels when the Chart is squished?

@arthurPuszynski
Copy link
Contributor

Interesting idea. Unfortunately the labeling system does not differentiate priority based on the label text content at this time but we may add this in the future.

@cnewtonMYCM
Copy link
Author

Ok, thanks for the info and for considering the idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants