When the label size is too short, the constant for calculating (#1120)
margin_size does not apply. Also nvd3 auto-adjust font-size of axis labels. Temporary solution here: Setting a fixed font-size on nvd3 axis labels and a minimum threshold for label size.
This commit is contained in:
parent
e895807158
commit
2132f6715e
|
|
@ -18,6 +18,11 @@ text.nv-axislabel {
|
|||
|
||||
.dist_bar svg.nvd3-svg {
|
||||
width: auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nv-x text{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bar .slice_container {
|
||||
|
|
|
|||
|
|
@ -69,14 +69,16 @@ function nvd3Vis(slice) {
|
|||
|
||||
// Calculates the longest label size for stretching bottom margin
|
||||
function calculateStretchMargins(payloadData) {
|
||||
const axisLabels = payloadData.data[0].values;
|
||||
let stretchMargin = 0;
|
||||
const pixelsPerCharX = 4.5; // approx, depends on font size
|
||||
let maxLabelSize = 0;
|
||||
for (let i = 0; i < axisLabels.length; i++) {
|
||||
maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
|
||||
}
|
||||
stretchMargin = Math.ceil(Math.max(stretchMargin, pixelsPerCharX * maxLabelSize));
|
||||
let maxLabelSize = 10; // accomodate for shorter labels
|
||||
payloadData.data.forEach((d) => {
|
||||
const axisLabels = d.values;
|
||||
for (let i = 0; i < axisLabels.length; i++) {
|
||||
maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
|
||||
}
|
||||
});
|
||||
stretchMargin = Math.ceil(pixelsPerCharX * maxLabelSize);
|
||||
return stretchMargin;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue