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

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

Closed
moffsugita opened this issue Jan 16, 2019 · 6 comments
Closed

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

moffsugita opened this issue Jan 16, 2019 · 6 comments

Comments

@moffsugita
Copy link

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.

2019-01-16 18 44 02

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

fix
(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?

2019-01-16 18 50 52

@kurkle
Copy link
Member

kurkle commented Jan 16, 2019

Multiline labels are defined as array. Sample:
https://www.chartjs.org/samples/latest/scales/multiline-labels.html

@moffsugita
Copy link
Author

@kurkle Thank you for reply.
So, it may resolve pseudo new-lined text!

But, multi-byte character is not resolved yet.

@moffsugita
Copy link
Author

I replaced from

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

to

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

second item was appeared. I resolved but I don't understand why

@moffsugita
Copy link
Author

    const labels = [
      ['2020', '4/12'],
    ];

Can I make the space between the lines small?

2019-01-17 10 40 07

@nagix
Copy link
Contributor

nagix commented Jan 17, 2019

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
Copy link
Member

Closing per our contribution guidelines.

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

No branches or pull requests

4 participants