javascript - Need some assistance with Victory Charts -

i working react victory charts , need assistance styling.

i new victory charts , highly accepted.

i need with:

1. padding between axis, bars , text.
2. some text being cut off.
3. the bar sizes.

this have:

<victorychart   width={600}   domainpadding={{ y: 50 }}>     <victoryaxis         // tickvalues specifies both number of ticks ,         // placed on axis         dependentaxis         style={{           ticklabels: {fontsize: 15, padding: 15 , width: 60}         }}         tickvalues={[1, 2, 3, 4]}         tickformat={["yes", "no", "probably", "never"]}       />   <victorybar horizontal     offsety={20}     padding={{ top: 20, bottom: 60 }}     style={{       data: { fill: "rgb(23, 52, 76)" },       parent: { border: "1px solid #ccc"},     }}       labels={(d) => ("| " + d.y + " (22%)")}       data={data}       x="quarter"       y="earnings"   /> </victorychart> 

this getting.

this kind of styling looking get.

see html here:

<h4>what have</h4>  <svg width="400" height="300" role="img" aria-labelledby="undefined-title undefined-desc" viewbox="0 0 400 300" style="border: none; height: 100%; width: 100%; user-select: none; touch-action: none;"><g role="presentation"><line x1="50" x2="50" y1="50" y2="250" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: rgb(37, 37, 37); fill: transparent; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;"></line><g role="presentation"><line x1="50" x2="350" y1="210.97560975609755" y2="210.97560975609755" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="210.97560975609755" y2="210.97560975609755" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="210.97560975609755"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">yes</tspan></text></g><g role="presentation"><line x1="50" x2="350" y1="171.9512195121951" y2="171.9512195121951" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="171.9512195121951" y2="171.9512195121951" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="171.9512195121951"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">no</tspan></text></g><g role="presentation"><line x1="50" x2="350" y1="132.9268292682927" y2="132.9268292682927" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="132.9268292682927" y2="132.9268292682927" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="132.9268292682927"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">probably</tspan></text></g><g role="presentation"><line x1="50" x2="350" y1="93.90243902439025" y2="93.90243902439025" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; pointer-events: none;"></line><line x1="50" x2="49" y1="93.90243902439025" y2="93.90243902439025" role="presentation" shape-rendering="auto" vector-effect="non-scaling-stroke" style="stroke: transparent; fill: transparent; size: 1px;"></line><text dx="0" dy="5.324999999999999" x="34" y="93.90243902439025"><tspan x="34" dx="0" text-anchor="end" style="fill: rgb(37, 37, 37); font-size: 15px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; padding: 15px; width: 60px; letter-spacing: normal;">never</tspan></text></g></g><g role="presentation"><path d="m 50, 202        l 50, 219        l 208, 219        l 208, 202        l 50, 202        z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><path d="m 50, 163        l 50, 180        l 287, 180        l 287, 163        l 50, 163        z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><path d="m 50, 124        l 50, 141        l 247, 141        l 247, 124        l 50, 124        z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><path d="m 50, 85        l 50, 102        l 350, 102        l 350, 85        l 50, 85        z" role="presentation" shape-rendering="auto" style="fill: rgb(23, 52, 76); stroke: rgb(23, 52, 76); padding: 8px; stroke-width: 0;"></path><text dx="0" dy="4.97" x="217.89473684210526" y="210.97560975609755"><tspan x="217.89473684210526" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1000 (22%)</tspan></text><text dx="0" dy="4.97" x="296.8421052631579" y="171.9512195121951"><tspan x="296.8421052631579" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1500 (22%)</tspan></text><text dx="0" dy="4.97" x="257.36842105263156" y="132.9268292682927"><tspan x="257.36842105263156" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1250 (22%)</tspan></text><text dx="0" dy="4.97" x="360" y="93.90243902439025"><tspan x="360" dx="0" text-anchor="start" style="fill: rgb(37, 37, 37); font-size: 14px; font-family: &quot;gill sans&quot;, &quot;gill sans mt&quot;, ser&shy;avek, &quot;trebuchet ms&quot;, sans-serif; stroke: transparent; letter-spacing: normal; padding: 10px;">| 1900 (22%)</tspan></text></g></svg>  <h4>what want</h4>  <svg width="449" height="97"><g id="grid" transform="translate(150,10)"><line x1="0" y1="0" x2="0" y2="0" style="stroke: rgb(157, 157, 157); stroke-width: 1;"></line><line x1="30" y1="0" x2="30" y2="0" style="stroke: rgb(157, 157, 157); stroke-width: 1;"></line><line x1="60" y1="0" x2="60" y2="0" style="stroke: rgb(157, 157, 157); stroke-width: 1;"></line></g><g transform="translate(150,0)" id="yaxis"><g class="tick" transform="translate(0,0)" style="opacity: 1;"><line x2="-1" y2="0"></line><text dy="19.5" x="-130" y="0" type="filter" style="text-anchor: start;">1 - 4 yrs </text></g><g class="tick" transform="translate(0,34)" style="opacity: 1;"><line x2="-1" y2="0"></line><text dy="19.5" x="-130" y="0" type="filter" style="text-anchor: start;">not sure</text></g><g class="tick" transform="translate(0,68)" style="opacity: 1;"><line x2="-1" y2="0"></line><text dy="19.5" x="-130" y="0" type="filter" style="text-anchor: start;">less 1yr</text></g><path class="domain" d="m-1,0h0v102h-1"></path></g><g transform="translate(150,0)" class="bars"><rect height="29" x="20" y="0" width="143.48275862068965" style="fill: rgb(23, 52, 76);"></rect><rect height="29" x="20" y="34" width="55.379310344827594" style="fill: rgb(43, 95, 140);"></rect><rect height="29" x="20" y="68" width="20.137931034482758" style="fill: rgb(62, 138, 204);"></rect><text x="168.48275862068965" y="19.5" style="fill: rgb(0, 0, 0); font-size: 12px; overflow: visible;">| 66% (57)</text><text x="80.37931034482759" y="53.5" style="fill: rgb(0, 0, 0); font-size: 12px; overflow: visible;">| 25% (22)</text><text x="45.13793103448276" y="87.5" style="fill: rgb(0, 0, 0); font-size: 12px; overflow: visible;">| 9% (8)</text></g></svg>

for text getting cut off, use padding prop on victorychart so:

<victorychart padding={{ left: 80, right: 100 }} />

this should give enough space keep tick labels , bar labels getting cut off. note domainpadding in instance adds space above , below bars.

to left-align axis labels, need specify ticklabelcomponent on axis, this:

<victoryaxis ticklabelcomponent={<victorylabel x={10} textanchor="start" />} />

to add spacing between bars , axis, use offsetx prop on axis. space axis left specified amount, while bars spaced left equal padding on chart itself.

<victoryaxis offsetx={80} />

here's fiddle these configs: https://jsfiddle.net/mfxtznun/3/

wiki