Line in C3.js goes out of the chart area

Question

I am facing a bug in C3.js chart library. When you look at the image you can see that the line chart goes out of the "chart-area" and it is not visible in some peak-cases. I would omit the thing that the label is not visible but I would be happy to see the line without hidden parts.

Here is a config for reproducing the error:

const config = {
        x: {
            tick: {
                rotate: -45,
                format: '%Y-%m-%d %H:%M:%S'
            },
            type: 'timeseries',
            height: 85,
            padding: {left: 30}
        },
        y: {
            label: {position: 'outer-middle', text: 'Event count'},
            min: 0,
            padding: {top: 0, bottom: 0}
        }
    },
    bindto: '#single-chart',
    color: {pattern: ['#323f71']},
    data: {
        x: 'x',
        xFormat: '%Y-%m-%d %H:%M:%S',
        labels: true,
        type: 'area-spline'
    },
    legend: {show: false},
    size: {height: 380},
    padding: {
        right: 50,
        left: 80
    },
    grid: {
        y: {
            show: true
        }
    }
};

Does anybody now, how to fix this?

Vanquished Wombat · Accepted Answer

I think the answer is to related to the axis.y.padding.top = 0 setting. However, my example looks slightly different from yours in that I never lose the line plot. The only way I can replicate yours is to set axis.y.max=1400, which then does chop the top of the plot off. If not then please could you unhide the y-axis line and post another image because it will be useful to see if the line terminator tick is there at the top of the axis.

See working snippet below which is modelled on your code and case but not exactly the same as slightly re-written. The button toggles between y.top padding of 20 and zero to illustrate the effect. You can see the highest plot point label becoming clipped off by the top limit. You may want to experiment with removing the setting entirely.

// Cannot find a usable method for changing axis.y.padding.top so redrawing the chart to show effect.

function resetIncPadding(yPaddingTop){
  
var chart = c3.generate(
{
    bindto: '#chart',
    size: {
      width: 600,
      height: 200
    },
    data: {
        x: 'x',
       // xFormat: '%Y-%m-%d %H:%M:%S',
        labels: true,
        type: 'area-spline',
        columns: [
          ['x', 
                  '2018-01-01','2018-01-02','2018-01-03','2018-01-04','2018-01-05','2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31'
           ],
        ['y',   5,10,15,10,10,10,10,5,30,90,500,1000,1200,1500,1230,1110,620,80,30,10,5,15,5,5,15,5,15,12,15,10,10
        ]
          ]
      },
      color: {pattern: ['#323f71']},
      axis: {
            x: {
                type: 'timeseries',
                tick: {
                    rotate: -45,
                    format: '%Y-%m-%d %H:%M:%S'
                },
                height: 85,
                padding: {left: 30}
            },
        y: {
                label: {position: 'outer-middle', text: 'Event count'},
                min: 0,
                padding: {top: yPaddingTop, bottom: 0}
            }
        },
        legend: {show: false},
        padding: {
            right: 50,
            left: 80
        },
        grid: {
            y: {
                show: true
            }
        }   
    });
}

// this is all about toggling the padding.
$('#toggle').on('click', function(e){

val = $(this).val();
val = (parseInt(val,10) === 20 ? 0 : 20);
  $(this).val(val).html(val)
  resetIncPadding(val);
  console.log(val)
})

// first draw on startup
resetIncPadding(20);






Using axis.y.padding.top =

Line in C3.js goes out of the chart area

Answers (1)

Related Questions