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

[BUG] Tick label overlaps axis label, long labels cropped #5906

Closed
afisher88 opened this issue Dec 11, 2018 · 1 comment · Fixed by #5961
Closed

[BUG] Tick label overlaps axis label, long labels cropped #5906

afisher88 opened this issue Dec 11, 2018 · 1 comment · Fixed by #5961

Comments

@afisher88
Copy link

afisher88 commented Dec 11, 2018

Expected Behavior

Canvas should resize to allow space for labels, labels should not overlap.

Current Behavior

Long labels are cropped by edge of canvas, labels overlap axis labels.

mobile-chart

Steps to Reproduce (for bugs)

https://codepen.io/afisher88/pen/mayvoe

Code:

var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: "bar",

  // The data for our dataset
  data: {
    labels: [
      "0k-40k",
      "40k-80k",
      "80k-100k",
      "100k-120k",
      "120k-160k",
      "160k-180k",
      "180k-220k"
    ],
    datasets: [
      {
        label: "My First dataset",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: [0, 10, 5, 2, 20, 30, 45]
      }
    ]
  },

  // Configuration options go here
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            fontSize: 16,
            fontStyle: "bold",
            precision: 2,
            suggestedMin: 0
          },
          scaleLabel: {
            display: true,
            fontSize: 16,
            fontStyle: "bold",
            labelString: "Chart Label X",
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            fontSize: 16,
            fontStyle: "bold",
            precision: 2,
            suggestedMin: 0
          },
          scaleLabel: {
            display: true,
            fontSize: 16,
            fontStyle: "bold",
            labelString: "Chart Label Y",
          }
        }
      ]
    }
  }
});

Context

This appears to be a bigger issue on small screens as in the code example above. I've tried playing around with padding and max / min rotation, but forcing the labels to be rotated 90 degrees results in more of the label being cut off.

Stack overflow question:

https://stackoverflow.com/questions/53710268/chartjs-tick-label-overlaps-axis-label

Environment

  • Chart.js version: 2.7.3
  • Browser name and version: Chrome 71.0.3578.80 (Official Build) (64-bit)
@afisher88 afisher88 changed the title [BUG] Tick label overlaps axis label [BUG] Tick label overlaps axis label, long labels cropped Dec 11, 2018
@KurtPreston
Copy link
Contributor

Is there a way to disable this change? I recently upgraded from Chart.js v2 to v3, and this causes issues when rendering real-time charts, causing the chart to resize as the tick labels approach the border.

https://stackoverflow.com/questions/69006050/chart-js-v3-how-to-allow-tick-label-overflow

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

Successfully merging a pull request may close this issue.

3 participants