c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.35k stars 1.39k forks source link

Labels are getting cut-off in the time-series line chart #2899

Open d-kishorekumar opened 3 months ago

d-kishorekumar commented 3 months ago

Hi Team, when we are rendering a time-series line chart and if the values are too huge then the labels are getting cut off, I tried with padding and other options but had no luck. Is there a way to fix this issue?

var chart = c3.generate({
    data: {
<img width="1656" alt="Screenshot 2024-08-07 at 10 34 30 AM" src="https://github.com/user-attachments/assets/055fbc10-be5b-4096-9e6b-5e287a9bd703">

        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06', '2013-01-07', '2013-01-08', '2013-01-09', '2013-01-10', '2013-01-11', '2013-01-12'],
            ['sample', 130, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 1234567890]
        ],
        labels:true
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                // this also works for non timeseries data
                values: ['2013-01-05', '2013-01-10']
            }
        }
    }
});