Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

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.