dosubot[bot] commented on issue #29114:
URL: https://github.com/apache/superset/issues/29114#issuecomment-2154960072
<!-- Answer -->
To fix the issue where two middle dimension boxes in a histogram chart
overlay each other, you can adjust the `binCount` property in the
`CustomHistogram` component. Increasing the `binCount` will create more bins,
which can help in reducing the overlap between the bars.
Here is the relevant part of the code where you can adjust the `binCount`:
```jsx
class CustomHistogram extends PureComponent {
render() {
const {
className,
data,
width,
height,
binCount,
colorScheme,
normalized,
cumulative,
opacity,
xAxisLabel,
yAxisLabel,
showLegend,
sliceId,
} = this.props;
const colorFn = CategoricalColorNamespace.getScale(colorScheme);
const keys = data.map(d => d.key);
const colorScale = scaleOrdinal({
domain: keys,
range: keys.map(x => colorFn(x, sliceId)),
});
return (
<WithLegend
className={`superset-legacy-chart-histogram ${className}`}
width={width}
height={height}
position="top"
renderLegend={({ direction, style }) =>
showLegend && (
<LegendOrdinal
style={style}
scale={colorScale}
direction={direction}
shape="rect"
labelMargin="0 15px 0 0"
/>
)
}
renderChart={parent => (
<Histogram
width={parent.width}
height={parent.height}
ariaLabel="Histogram"
normalized={normalized}
cumulative={cumulative}
binCount={binCount} // Adjust this value
binType="numeric"
margin={{ top: 20, right: 20 }}
renderTooltip={({ datum, color }) => (
<div>
<strong style={{ color }}>
{datum.bin0} {t('to')} {datum.bin1}
</strong>
<div>
<strong>{t('count')} </strong>
{datum.count}
</div>
<div>
<strong>{t('cumulative')} </strong>
{datum.cumulative}
</div>
<div>
<strong>{t('percentile (exclusive)')} </strong>
{`${(
(datum.cumulativeDensity - datum.density) *
100
).toPrecision(4)}th`}
</div>
</div>
)}
valueAccessor={datum => datum}
theme={chartTheme}
>
{data.map(series => (
<BarSeries
key={series.key}
animated
rawData={series.values}
fill={colorScale(series.key)}
fillOpacity={opacity}
/>
))}
<XAxis label={xAxisLabel} />
<YAxis label={yAxisLabel} />
</Histogram>
)}
/>
);
}
}
CustomHistogram.propTypes = propTypes;
CustomHistogram.defaultProps = {
binCount: 15, // Default value
className: '',
colorScheme: '',
normalized: false,
cumulative: false,
opacity: 1,
xAxisLabel: '',
yAxisLabel: '',
};
export default styled(CustomHistogram)`
.superset-legacy-chart-histogram {
overflow: hidden;
}
`;
```
Try increasing the `binCount` value from its default of 15 to a higher
number to see if it resolves the overlay issue. Additionally, ensure that the
`transformProps` function in
`superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts`
is correctly processing the histogram data and properties, as this function is
responsible for transforming the chart properties and data for rendering
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/legacy-plugin-chart-histogram/src/Histogram.jsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/Histogram/transformProps.ts)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
