[docs] fix padding in svg bar chart example (#5945)

Fixes #5941
pull/5262/head
David Dawkins 3 years ago committed by GitHub
parent 9467e4a780
commit e7cbea64e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -38,9 +38,9 @@
<div class="chart" bind:clientWidth={width} bind:clientHeight={height}> <div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
<svg> <svg>
<!-- y axis --> <!-- y axis -->
<g class="axis y-axis" transform="translate(0,{padding.top})"> <g class="axis y-axis">
{#each yTicks as tick} {#each yTicks as tick}
<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})"> <g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
<line x2="100%"></line> <line x2="100%"></line>
<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text> <text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
</g> </g>
@ -62,7 +62,7 @@
x="{xScale(i) + 2}" x="{xScale(i) + 2}"
y="{yScale(point.birthrate)}" y="{yScale(point.birthrate)}"
width="{barWidth - 4}" width="{barWidth - 4}"
height="{height - padding.bottom - yScale(point.birthrate)}" height="{yScale(0) - yScale(point.birthrate)}"
></rect> ></rect>
{/each} {/each}
</g> </g>
@ -115,4 +115,4 @@
stroke: none; stroke: none;
opacity: 0.65; opacity: 0.65;
} }
</style> </style>

Loading…
Cancel
Save