Line chart first and last points cut off

I’m using plotly & plotly-react inside of a custom dash component. It’s a small chart, I put a screenshot below the code (data redacted).

Any advice on how to get the tool tips to show? I tried changing the padding from 10-15-20, as that seemed to fix most of the issues people had on SO, to no avail. Not sure what else I can do.

My config is as follows. The plot width and margin is dynamically generated from the parent component. The padding is a constant 10:

module.exports = {
    layout: (plotWidth, marginLeft, padding) => {
        return {
            width: plotWidth,
            height: 50,
            margin: {
                l: marginLeft,
                r: 0,
                b: 0,
                t: 0,
                xpad: padding
            },
            xaxis: {
                showgrid: false,
                showticklabels: false,
                ticks: '',
                fixedrange: true
            },
            yaxis: {
                showgrid: false,
                showticklabels: false,
                ticks: '',
                fixedrange: true
            }
        }
    },
    config: {
        displayModeBar: false
    }
}

This is my code to resize the chart from the component:

componentDidMount(){
    window.addEventListener('resize', () => this.resizeChart());
    
    return this.resizeChart();
}

resizeChart(){
    const blocks = document.getElementsByClassName('title');
    
    const blockWidth = blocks[0].scrollWidth;
    const plotWidth = Math.floor((blockWidth * .85));

    this.setState({
        padding: 10,
        plotWidth: plotWidth, 
        marginLeft: (plotWidth * 0.155)
    });

}

Can you paste your code into here? I tried to duplicate your example but it seems like the points are not getting cut off. https://codepen.io/rzrzrz/pen/opKvGY

I think the difference between my chart and the one you did on codepen is that my chart is constrained to a maximum width of ~ 300px.

Here’s my Chart.react.js, plot-config is above:

import React from 'react';
import Plot from 'react-plotly.js';
import PropTypes from 'prop-types';

import PlotConfig from '../../constants/plot-config';

import '../../styles/block.css';

export default class Chart extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            plotWidth: 575,
            padding: 10,
            marginLeft: 0
        };
    }
    
    render(){
        const data = {
            type: 'lines',
            x: this.props.xData,
            y: this.props.yData,
            line: {
                color: '#c4c6ca'
            },
            fill: 'tonexty'
        };
        
        if(this.props.text){
            data.hoverinfo = 'text';
            data.hovertext = this.props.text;
        }

        return(
            <div className="chart">
                <Plot
                    data={[data]}

                    layout={PlotConfig.layout(this.state.plotWidth, this.state.marginLeft, this.state.padding)}

                    config={PlotConfig.config}
                />
            </div>
        );
    }

    componentDidMount(){
        window.addEventListener('resize', () => this.resizeChart());
        
        return this.resizeChart();
    }

    resizeChart(){
        const blocks = document.getElementsByClassName('title');
        
        const blockWidth = blocks[0].scrollWidth;
        const plotWidth = Math.floor((blockWidth * .85));

        this.setState({
            padding: 10,
            plotWidth: plotWidth, 
            marginLeft: (plotWidth * 0.155)
        });

    }
}

Chart.propTypes = {
    xData: PropTypes.array.isRequired,
    yData: PropTypes.array.isRequired,
    text: PropTypes.array
}

Here’s styles/block.css:

.block{
    border: 2px solid #c4c6ca;
    border-radius: 2px;
    display: inline-block;
    width: 350px;
    margin-bottom: 10px;
    font-family: Arial;
}

.block{
    margin-right: 3%;
}

.title{
    border-bottom: 2px solid #c4c6ca;
    font-weight: bold;
    padding: 5px;
    margin-bottom: 30px;
}

.bodyBlockContainer{
    border-bottom: 2px solid #c4c6ca;
    margin-bottom: 10px;
}

.bodyBlock{
    display: inline-block;
    text-align: center;
    width: 30%;
    margin-bottom: 10px;
}

.bodyBlock:not(:last-child){
    margin-right: 3%;
}

.img{
    height: 25px;
    width: 25px;
}

.difference{
    text-align: center;
}
.total-left, .year-left, .difference{
    color: #8c8c8f;
}

.total{
    font-size: 1.75em;
    margin-bottom: 5px;
}

.total, .year{
    font-weight: bold;
}

I changed it to 300 width. Still seems to be fine. https://codepen.io/rzrzrz/pen/opKvGY

You can try playing with that pen with your code if you want. I think its probably the styling of the block/container that is cutting off the chart.