kgdiem
January 25, 2018, 5:01pm
1
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)
});
}
rzrz
January 26, 2018, 12:50am
2
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
kgdiem
January 26, 2018, 1:53pm
3
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;
}
rzrz
January 26, 2018, 5:55pm
4
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.