Room for histogram legend (#330)

Resolves #322

react/src/components/plots.tsx

@@ -108,7 +108,7 @@ function Histogram(props: { histograms: HistogramProps[], screenshot_mode: boole
  },
  marginTop: 80,
  marginBottom: 40,
- marginLeft: 50,
+ marginLeft: 80,
  color: props.histograms.length === 1
  ? undefined
  : { legend: true, range: colors, domain: shortnames },

tests/reference_strings/histogram-basic-article.txt

@@ -8,4 +8,4 @@
 :where(.plot-d6a7b5 text),
 :where(.plot-d6a7b5 tspan) {
  white-space: pre;
-}</style><g aria-label="line" fill="none" stroke="#5a7dc3" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" transform="translate(0.5,0.5)"><path d="M50,421.537L70.217,421.602L90.435,421.537L110.652,421.472L130.87,421.407L151.087,421.343L171.304,421.213L191.522,420.954L211.739,420.63L231.957,420.111L252.174,419.269L272.391,417.972L292.609,415.639L312.826,412.204L333.043,406.436L353.261,398.01L373.478,387.316L393.696,375.196L413.913,365.863L434.13,355.493L454.348,347.067L474.565,338.382L494.783,324.447L515,314.984L535.217,303.901L555.435,289.189L575.652,274.217L595.87,250.366L616.087,224.441L636.304,195.923L656.522,156.387L676.739,121.647L696.957,109.073L717.174,93.648L737.391,88.333L757.609,96.435L777.826,153.665L798.043,226.45L818.261,289.448L838.478,334.558L858.696,371.696L878.913,395.417L899.13,419.139L919.348,421.667L939.565,421.667L959.783,421.667L980,421.667"></path></g><g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g><g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)"><path transform="translate(50,430)" d="M0,0L0,6"></path><path transform="translate(110.65217391304347,430)" d="M0,0L0,6"></path><path transform="translate(191.5217391304348,430)" d="M0,0L0,6"></path><path transform="translate(252.17391304347825,430)" d="M0,0L0,6"></path><path transform="translate(312.82608695652175,430)" d="M0,0L0,6"></path><path transform="translate(393.69565217391306,430)" d="M0,0L0,6"></path><path transform="translate(454.3478260869565,430)" d="M0,0L0,6"></path><path transform="translate(515,430)" d="M0,0L0,6"></path><path transform="translate(595.8695652173914,430)" d="M0,0L0,6"></path><path transform="translate(656.5217391304349,430)" d="M0,0L0,6"></path><path transform="translate(717.1739130434783,430)" d="M0,0L0,6"></path><path transform="translate(798.0434782608695,430)" d="M0,0L0,6"></path><path transform="translate(858.695652173913,430)" d="M0,0L0,6"></path><path transform="translate(919.3478260869565,430)" d="M0,0L0,6"></path></g><g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"><text y="0.71em" transform="translate(50,430)">1</text><text y="0.71em" transform="translate(110.65217391304347,430)">2</text><text y="0.71em" transform="translate(191.5217391304348,430)">5</text><text y="0.71em" transform="translate(252.17391304347825,430)">10</text><text y="0.71em" transform="translate(312.82608695652175,430)">20</text><text y="0.71em" transform="translate(393.69565217391306,430)">50</text><text y="0.71em" transform="translate(454.3478260869565,430)">100</text><text y="0.71em" transform="translate(515,430)">200</text><text y="0.71em" transform="translate(595.8695652173914,430)">500</text><text y="0.71em" transform="translate(656.5217391304349,430)">1k</text><text y="0.71em" transform="translate(717.1739130434783,430)">2k</text><text y="0.71em" transform="translate(798.0434782608695,430)">5k</text><text y="0.71em" transform="translate(858.695652173913,430)">10k</text><text y="0.71em" transform="translate(919.3478260869565,430)">20k</text></g><g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,37.5)"><text transform="translate(980,430)">Density (/km²) →</text></g><g aria-label="x-grid" aria-hidden="true" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"><line x1="50" x2="50" y1="80" y2="430"></line><line x1="110.65217391304347" x2="110.65217391304347" y1="80" y2="430"></line><line x1="191.5217391304348" x2="191.5217391304348" y1="80" y2="430"></line><line x1="252.17391304347825" x2="252.17391304347825" y1="80" y2="430"></line><line x1="312.82608695652175" x2="312.82608695652175" y1="80" y2="430"></line><line x1="393.69565217391306" x2="393.69565217391306" y1="80" y2="430"></line><line x1="454.3478260869565" x2="454.3478260869565" y1="80" y2="430"></line><line x1="515" x2="515" y1="80" y2="430"></line><line x1="595.8695652173914" x2="595.8695652173914" y1="80" y2="430"></line><line x1="656.5217391304349" x2="656.5217391304349" y1="80" y2="430"></line><line x1="717.1739130434783" x2="717.1739130434783" y1="80" y2="430"></line><line x1="798.0434782608695" x2="798.0434782608695" y1="80" y2="430"></line><line x1="858.695652173913" x2="858.695652173913" y1="80" y2="430"></line><line x1="919.3478260869565" x2="919.3478260869565" y1="80" y2="430"></line></g><g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)"><path transform="translate(50,421.6666666666667)" d="M0,0L-6,0"></path><path transform="translate(50,379.190161384406)" d="M0,0L-6,0"></path><path transform="translate(50,336.7136561021453)" d="M0,0L-6,0"></path><path transform="translate(50,294.2371508198847)" d="M0,0L-6,0"></path><path transform="translate(50,251.760645537624)" d="M0,0L-6,0"></path><path transform="translate(50,209.2841402553633)" d="M0,0L-6,0"></path><path transform="translate(50,166.80763497310267)" d="M0,0L-6,0"></path><path transform="translate(50,124.33112969084193)" d="M0,0L-6,0"></path><path transform="translate(50,81.85462440858123)" d="M0,0L-6,0"></path></g><g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"><text y="0.32em" transform="translate(50,421.6666666666667)">0</text><text y="0.32em" transform="translate(50,379.190161384406)">1</text><text y="0.32em" transform="translate(50,336.7136561021453)">2</text><text y="0.32em" transform="translate(50,294.2371508198847)">3</text><text y="0.32em" transform="translate(50,251.760645537624)">4</text><text y="0.32em" transform="translate(50,209.2841402553633)">5</text><text y="0.32em" transform="translate(50,166.80763497310267)">6</text><text y="0.32em" transform="translate(50,124.33112969084193)">7</text><text y="0.32em" transform="translate(50,81.85462440858123)">8</text></g><g aria-label="y-axis label" text-anchor="start" transform="translate(-46.5,-76.5)"><text y="0.71em" transform="translate(50,80)">↑ % of total</text></g><g aria-label="y-grid" aria-hidden="true" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"><line x1="50" x2="980" y1="421.6666666666667" y2="421.6666666666667"></line><line x1="50" x2="980" y1="379.190161384406" y2="379.190161384406"></line><line x1="50" x2="980" y1="336.7136561021453" y2="336.7136561021453"></line><line x1="50" x2="980" y1="294.2371508198847" y2="294.2371508198847"></line><line x1="50" x2="980" y1="251.760645537624" y2="251.760645537624"></line><line x1="50" x2="980" y1="209.2841402553633" y2="209.2841402553633"></line><line x1="50" x2="980" y1="166.80763497310267" y2="166.80763497310267"></line><line x1="50" x2="980" y1="124.33112969084193" y2="124.33112969084193"></line><line x1="50" x2="980" y1="81.85462440858123" y2="81.85462440858123"></line></g><g aria-label="text" transform="translate(0.5,-39.5)"><text y="0.71em" transform="translate(515,80)">Germany</text></g></svg>
+}</style><g aria-label="line" fill="none" stroke="#5a7dc3" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" transform="translate(0.5,0.5)"><path d="M80,421.537L99.565,421.602L119.13,421.537L138.696,421.472L158.261,421.407L177.826,421.343L197.391,421.213L216.957,420.954L236.522,420.63L256.087,420.111L275.652,419.269L295.217,417.972L314.783,415.639L334.348,412.204L353.913,406.436L373.478,398.01L393.043,387.316L412.609,375.196L432.174,365.863L451.739,355.493L471.304,347.067L490.87,338.382L510.435,324.447L530,314.984L549.565,303.901L569.13,289.189L588.696,274.217L608.261,250.366L627.826,224.441L647.391,195.923L666.957,156.387L686.522,121.647L706.087,109.073L725.652,93.648L745.217,88.333L764.783,96.435L784.348,153.665L803.913,226.45L823.478,289.448L843.043,334.558L862.609,371.696L882.174,395.417L901.739,419.139L921.304,421.667L940.87,421.667L960.435,421.667L980,421.667"></path></g><g aria-label="tip" fill="var(--plot-background)" stroke="currentColor" pointer-events="none" text-anchor="start" transform="translate(0.5,0.5)"></g><g aria-label="x-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0.5,0)"><path transform="translate(80,430)" d="M0,0L0,6"></path><path transform="translate(138.69565217391303,430)" d="M0,0L0,6"></path><path transform="translate(216.95652173913044,430)" d="M0,0L0,6"></path><path transform="translate(275.6521739130435,430)" d="M0,0L0,6"></path><path transform="translate(334.3478260869565,430)" d="M0,0L0,6"></path><path transform="translate(412.6086956521739,430)" d="M0,0L0,6"></path><path transform="translate(471.30434782608694,430)" d="M0,0L0,6"></path><path transform="translate(530,430)" d="M0,0L0,6"></path><path transform="translate(608.2608695652175,430)" d="M0,0L0,6"></path><path transform="translate(666.9565217391305,430)" d="M0,0L0,6"></path><path transform="translate(725.6521739130434,430)" d="M0,0L0,6"></path><path transform="translate(803.9130434782609,430)" d="M0,0L0,6"></path><path transform="translate(862.6086956521739,430)" d="M0,0L0,6"></path><path transform="translate(921.304347826087,430)" d="M0,0L0,6"></path></g><g aria-label="x-axis tick label" font-variant="tabular-nums" transform="translate(0.5,9.5)"><text y="0.71em" transform="translate(80,430)">1</text><text y="0.71em" transform="translate(138.69565217391303,430)">2</text><text y="0.71em" transform="translate(216.95652173913044,430)">5</text><text y="0.71em" transform="translate(275.6521739130435,430)">10</text><text y="0.71em" transform="translate(334.3478260869565,430)">20</text><text y="0.71em" transform="translate(412.6086956521739,430)">50</text><text y="0.71em" transform="translate(471.30434782608694,430)">100</text><text y="0.71em" transform="translate(530,430)">200</text><text y="0.71em" transform="translate(608.2608695652175,430)">500</text><text y="0.71em" transform="translate(666.9565217391305,430)">1k</text><text y="0.71em" transform="translate(725.6521739130434,430)">2k</text><text y="0.71em" transform="translate(803.9130434782609,430)">5k</text><text y="0.71em" transform="translate(862.6086956521739,430)">10k</text><text y="0.71em" transform="translate(921.304347826087,430)">20k</text></g><g aria-label="x-axis label" text-anchor="end" transform="translate(17.5,37.5)"><text transform="translate(980,430)">Density (/km²) →</text></g><g aria-label="x-grid" aria-hidden="true" stroke="currentColor" stroke-opacity="0.1" transform="translate(0.5,0)"><line x1="80" x2="80" y1="80" y2="430"></line><line x1="138.69565217391303" x2="138.69565217391303" y1="80" y2="430"></line><line x1="216.95652173913044" x2="216.95652173913044" y1="80" y2="430"></line><line x1="275.6521739130435" x2="275.6521739130435" y1="80" y2="430"></line><line x1="334.3478260869565" x2="334.3478260869565" y1="80" y2="430"></line><line x1="412.6086956521739" x2="412.6086956521739" y1="80" y2="430"></line><line x1="471.30434782608694" x2="471.30434782608694" y1="80" y2="430"></line><line x1="530" x2="530" y1="80" y2="430"></line><line x1="608.2608695652175" x2="608.2608695652175" y1="80" y2="430"></line><line x1="666.9565217391305" x2="666.9565217391305" y1="80" y2="430"></line><line x1="725.6521739130434" x2="725.6521739130434" y1="80" y2="430"></line><line x1="803.9130434782609" x2="803.9130434782609" y1="80" y2="430"></line><line x1="862.6086956521739" x2="862.6086956521739" y1="80" y2="430"></line><line x1="921.304347826087" x2="921.304347826087" y1="80" y2="430"></line></g><g aria-label="y-axis tick" aria-hidden="true" fill="none" stroke="currentColor" transform="translate(0,0.5)"><path transform="translate(80,421.6666666666667)" d="M0,0L-6,0"></path><path transform="translate(80,379.190161384406)" d="M0,0L-6,0"></path><path transform="translate(80,336.7136561021453)" d="M0,0L-6,0"></path><path transform="translate(80,294.2371508198847)" d="M0,0L-6,0"></path><path transform="translate(80,251.760645537624)" d="M0,0L-6,0"></path><path transform="translate(80,209.2841402553633)" d="M0,0L-6,0"></path><path transform="translate(80,166.80763497310267)" d="M0,0L-6,0"></path><path transform="translate(80,124.33112969084193)" d="M0,0L-6,0"></path><path transform="translate(80,81.85462440858123)" d="M0,0L-6,0"></path></g><g aria-label="y-axis tick label" text-anchor="end" font-variant="tabular-nums" transform="translate(-8.5,0.5)"><text y="0.32em" transform="translate(80,421.6666666666667)">0</text><text y="0.32em" transform="translate(80,379.190161384406)">1</text><text y="0.32em" transform="translate(80,336.7136561021453)">2</text><text y="0.32em" transform="translate(80,294.2371508198847)">3</text><text y="0.32em" transform="translate(80,251.760645537624)">4</text><text y="0.32em" transform="translate(80,209.2841402553633)">5</text><text y="0.32em" transform="translate(80,166.80763497310267)">6</text><text y="0.32em" transform="translate(80,124.33112969084193)">7</text><text y="0.32em" transform="translate(80,81.85462440858123)">8</text></g><g aria-label="y-axis label" text-anchor="start" transform="translate(-76.5,-76.5)"><text y="0.71em" transform="translate(80,80)">↑ % of total</text></g><g aria-label="y-grid" aria-hidden="true" stroke="currentColor" stroke-opacity="0.1" transform="translate(0,0.5)"><line x1="80" x2="980" y1="421.6666666666667" y2="421.6666666666667"></line><line x1="80" x2="980" y1="379.190161384406" y2="379.190161384406"></line><line x1="80" x2="980" y1="336.7136561021453" y2="336.7136561021453"></line><line x1="80" x2="980" y1="294.2371508198847" y2="294.2371508198847"></line><line x1="80" x2="980" y1="251.760645537624" y2="251.760645537624"></line><line x1="80" x2="980" y1="209.2841402553633" y2="209.2841402553633"></line><line x1="80" x2="980" y1="166.80763497310267" y2="166.80763497310267"></line><line x1="80" x2="980" y1="124.33112969084193" y2="124.33112969084193"></line><line x1="80" x2="980" y1="81.85462440858123" y2="81.85462440858123"></line></g><g aria-label="text" transform="translate(0.5,-39.5)"><text y="0.71em" transform="translate(530,80)">Germany</text></g></svg>