• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

247
Views
unable to display count on the barchart (svg graph)

I am currently working on a stacked barchart using only svg, html and css and no third party library is used for this.

Please refer to this codepen https://codepen.io/a166617/pen/qBXvzQd

As per the stacked barchart, the data gets displayed properly but the count of each bar is not displayed.

the data used for this stacked barchart is as follows

const data = [
    {
      name: 'Transit',
      passed: 2,
      skipped: 5,
      failed: 22,
      untested: 0
    },
    {
      name: 'Access',
      passed: 0,
      skipped: 0,
      failed: 0,
      untested: 100
    }
  ];

As per this data, i am trying to display count 2 (for passed) ,5 (for skipped) , 22 (for failed) and 100 (for untested)

Can someone please let me know how to display these counts on their respective barcharts. To be clear, i want to display count on the barchart similar to the one shown in the below screenshot

enter image description here

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Just add a <text> element into your bar group.

      return (
        <g key={Math.random()}>
          <rect
            width={50}
            height={`${height}%`}
            fill={bar.color}
            x={60} // multiply with the width (50) + 10 for space
            y={`${y}%`}
          />
          <text
            x={70}                // visible centre point of your bar
            y={`${y + height/2}%`}
            dy="1.3em"            // adjusts the text y position to adjust for
                                  // text descenders. Makes the vertical centring 
                                  // more accurate. Normally 0.3 to -0.35, but has 
                                  // an extra ~1em because of the 180deg rotate.
            textAnchor="middle"   // centre the text horizontall at x
            class="bar-label"     // styling for this text
            >{`${bar.value}%`}</text>
        </g>
      );
.bar-label {
  fill: white;
  font-size: 10px;
  transform-box: fill-box;
  transform: rotateX(180deg);
}

This change is complicated a little by the fact that you've rotated your bar SVGs by 180deg. That causes the text to be upside down. So I have to flip each <text> element back upright.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error