line chart support new-lined text and multi-byte labels?

Hey there!

I use line chart. And I want to use new-lined text and multi-byte labels for it.

it is my snippet (TypeScript).

    const labels = [
      '2020\n4/12',
      '2020\n7/14',
      '2020\n10/10'
    ];

    const currentData = {
      data: [
        80, 55, 40
      ],
      fill: false,
      borderColor: 'rgb(244,154,60)',
      lineTension: 0,
      pointBorderWidth: 10,
      pointBorderColor: 'rgb(238,88,53)',
    };

    const config = {
      type: 'line',
      data: { labels: labels, datasets: [currentData]},

      options: {
        scales: {
          xAxes: [{
            ticks: {
              fontSize: 35
            }
          }],
          yAxes: [{
            ticks: {
              fontSize: 35
            }
          }]
        },
        animation: {
          duration: 0,
        },
        legend: {
          display: false,
        }
      }
    } as Chart.ChartConfiguration;

    const myLineChart = new Chart(context, config);

it is result.

Thou I use 2020\n4/12 string, but it didn’t draw new-lined text like this.

(I edited the picture.)

And, I change the labels to multi-byte character (like Japanese).

    const labels = [
      '2020年4月12日',
      '2020年7月14日', // didn't show
      '2020年10月10日'
    ];

second data didn’t show is it bug?

[nagix]

I don’t think this is a multi-byte character issue, but the issue in the autoSkip code, which has been fixed in #5922. The fix has not been released yet, but you can try the master build.

For your last question, #5914 introduced ticks.lineHeight option to change the height of text lines (see line-height in CSS for details), so you can also try it using the master build.

[simonbrunel]

Closing per our contribution guidelines.