Black Lives Matter. Please consider donating to Black Girls Code today.
Dash Enterprise delivers an incredible 21x cost savings 💸Download the e-book!

Disable X Axis Hover text

I’m trying to disable the black hover info (hover tag?) circled in red in my reference image but keep the blue hover info.

        const trace1 = {
            x: dates,
            y: cep,
            mode: 'lines',
            type: 'scatter',
            name: 'btod',
            hovertemplate: 'Date: %{x}<extra></extra>',
            hoverinfo: "skip"
        };

        const data = [trace1];

        const layout = {
            autosize: false,
            width: btodContainer.offsetWidth,
            height: btodContainer.offsetHeight,
            xaxis: {
                type: 'date',
                title: 'Dates'
            },
            yaxis: {
                title: 'CEP'
            },
            title: 'Bad Time of Day',
            responsive: true,
            showlegend: false
        };

Setting layout.hovermode: 'closest' should do the trick.

Thanks! I didn’t think to try that.

Is there another way to do this? I’m attempting this on a bar chart that has a wide range of data points–some are close to zero–which makes it difficult for users to hover over if layout.hovermode: 'closest'.

1 Like
#boxplot .axistext {
    display: none;
}

This worked for me