Chartist-js: Labels are off-screen when rotating (?)

[andreasba]

Good evening,

I have a pretty basic line chart where I have a lot of labels on the x-axis that is why I rotate them 45°. My CSS looks like the following:

/* For nice blueish line-charts */
.ct-series-a .ct-line,
.ct-series-a .ct-point {
    stroke: #337fcc;
}

/* We increase the font size of the chart axis */
.ct-label {
    font-size: inherit;
}

/* We rotate the label for the historical charts */
.ct-label.ct-horizontal.ct-end {
    /* Safari */
    -webkit-transform: rotate(-45deg);
    /* Firefox */
    -moz-transform: rotate(-45deg);
    /* IE */
    -ms-transform: rotate(-45deg);
    /* Opera */
    -o-transform: rotate(-45deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    white-space: nowrap;
}

Now when I have not lots of data points but only a few of them, for example like this

{"labels":["2016-01-02","2016-01-03"],"series":["41","41"]}

My graph looks like this in FF (current version):

In Chrome I have labels but they are way off:

My options set via JS look like this:

                    var options = {
                        axisX: {
                            labelOffset: {
                                y: 35,
                                x: -45
                            }
                        },
                        axisY:{
                            onlyInteger: true
                        },
                        chartPadding: {
                            bottom: 40
                        },
                        plugins: [
                            Chartist.plugins.tooltip()
                        ]
                    };
                    // In adition to the regular options we specify responsive option overrides that will override the default configutation based on the matching media queries.
                    var responsiveOptions = [
                        ['screen and (min-width: 641px) and (max-width: 1024px)', {
                            showPoint: false,
                            axisX: {
                                labelInterpolationFnc: function(value) {
                                    // Will return mm-dd on medium screens
                                    return value.slice(5, 10);
                                }
                            }
                        }],
                        ['screen and (max-width: 640px)', {
                            showLine: false,
                            axisX: {
                                labelInterpolationFnc: function(value) {
                                    // Will return dd on small screens
                                    return value.slice(8, 10);
                                }
                            }
                        }]
                    ];

I need the label offset and the bottom padding due to the -45degree rotation as far as I can tell - at least thats how the chart looks fine if there is lots of data to show:

Any idea what could be the reason for this?

Thanks
Andreas

[gimpfenlord]

i want to achiev the same like his last picture.
how can i do this? :)

css

.ct-label.ct-horizontal.ct-end {
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -moz-transform-origin: 100% 0;
        -ms-transform-origin: 100% 0;
        -o-transform-origin: 100% 0;
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        text-align: right;
        max-height: 1.5em;
        min-width: 100px;
        max-width: 100px;
    }

javascript code:

chart.on('draw', (ctx) => {
                if (ctx.type === 'label') {
                    // adjust label position for rotation
                    const dX = ctx.width / 2 + (100 - ctx.width)
                    ctx.element.attr({ x: ctx.element.attr('x') - dX })
                }
            })

but there is still a gap between the chart and my labels

[andreasba]

What do you mean @gimpfenlord ? I you want to do what I did above, just take the code I posted above?

[gionkunz]

Sorry I never replied to this, please re-open if still needed. The firefox issue looks like the labels are overflowing and SVG has overflow: hidden. Try providing more axisX: offset