Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Displaying text on top of bars in MUI X BarChart

I’m using the <BarChart> component from @mui/x-charts (version "^6.19.1") and I want to display the data values on top of each bar for better readability.

Current Output:
enter image description here
Desired Outcome:
enter image description here

Below is my React js code:

const MyData = [
  {
    Name: "All",
    low: 19.63,
    middle: 34.84,
    average: 35.98,
    good: 9.55,
  },
  // ... other data objects
];
export default function({MyData}){
    const lowMarks = [];
    const Basic = [];
    const Proficient = [];
    const Advance = [];
    const xLabels = [];

    MyData.map(({Name, low, middle, average, good })=>{
        lowMarks.push(low)
        middleMarks.push(middle)
        averageMarks.push(average)
        goodMarks.push(good)
        xLabels.push(Name)
    })

return(
<BarChart  xs={12}
  series={
           [
  { data: lowMarks, label: 'low', id: 'low', stack: 'total', color: '#f4cccc',valueFormatter},
  { data: middleMarks, label: 'middle', id: 'middle', stack: 'total', color: '#ffe599', valueFormatter},
  { data: averageMarks, label: 'average', id: 'average', stack: 'total', color: '#b6d7a8', valueFormatter},
 { data: goodMarks, label: 'good', id: 'good', stack: 'total', color: '#9fc5e8', valueFormatter},
 ]
}
yAxis={[{ data: xLabels, scaleType: 'band'}]}
xAxis={[{valueFormatter}]}
layout="horizontal"
tooltip={{ trigger: 'item' }}
>
</BarChart>
)}
Tags:

2

Answers


  1. 0

    enter image description hereHope this will helpfull.

    import React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

const Demobar = () => {
    const MyData = [
        { Name: "All", low: 19.63, middle: 34.84, average: 35.98, good: 9.55 },
 //other data
    ];

    const lowMarks = MyData.map(({ low }) => low);
    const middleMarks = MyData.map(({ middle }) => middle);
    const averageMarks = MyData.map(({ average }) => average);
    const goodMarks = MyData.map(({ good }) => good);
    const xLabels = MyData.map(({ Name }) => Name);

    return (
        <BarChart
            yAxis={[{ scaleType: 'band', data: xLabels }]}
            series={[
                { data: lowMarks, label: 'low', id: 'low', stack: 'total', color: '#f4cccc' },
                { data: middleMarks, label: 'middle', id: 'middle', stack: 'total', color: '#ffe599' },
                { data: averageMarks, label: 'average', id: 'average', stack: 'total', color: '#b6d7a8' },
                { data: goodMarks, label: 'good', id: 'good', stack: 'total', color: '#9fc5e8' },
            ]}
            width={500}
            height={300}
            barLabel="value"
            layout="horizontal"

        />
    );
};

export default Demobar;
    Login or Signup to reply.
  2. 0

    barLabel is not working in BarChart for displaying data on bars

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search