CODEWITHSUNDEEP
javascriptreactjschartsjsxrecharts
user9430503
user9430503

Reputation:

Recharts custom dot

I have an StackedAreaChart and after I show areas on graph I want to add a custom dot.

Currently my code look like this but I want to draw a dot depend on XAxis and YAxis data. Does exist any way to pass x and y coordinates to a CustomizedDot class?

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Label, Dot } from 'recharts';

const data = [
    { name: 142, underweight: 36.3, normal: 11.3, overweight: 6.8, obese: 56.7 },
    { name: 196, underweight: 70.3, normal: 22.7, overweight: 15.9, obese: 2.2 },
];

class CustomizedDot extends React.Component {
    render() {
        const { cx, cy } = this.props;

        return (
            <circle cx={160} cy={50} r={25} stroke="black" strokeWidth={3} fill="red" />
        );
    }
};

class BMIGraph extends React.Component {
    render() {
        return (
            <div>
                <h2>Index telesne mase za odrasle</h2>
                <AreaChart width={600} height={400} data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
                    <XAxis dataKey="name">
                        <Label value="Višina (cm)" offset={0} position="insideBottom" />
                    </XAxis>
                    <YAxis>
                        <Label value="Teža (kg)" angle={-90} position="insideLeft" textAnchor="middle" />
                    </YAxis>
                    <CartesianGrid strokeDasharray="3 3" />
                    {/* <Tooltip /> */}
                    <CustomizedDot />
                    <Area type='monotone' dataKey='underweight' stackId="1" stroke='#8884d8' fill='#7d7dff' animationDuration={3500} name="Podhranjenost" dot={<CustomizedDot />} />
                    <Area type='monotone' dataKey='normal' stackId="1" stroke='#82ca9d' fill='#7dff7d' animationDuration={3500} name="Normalna teža" />
                    <Area type='monotone' dataKey='overweight' stackId="1" stroke='#ffc658' fill='#ffff7d' animationDuration={3500} name="Prekomerna teža" />
                    <Area type='monotone' dataKey='obese' stackId="1" stroke='#ffc658' fill='#ff7d7d' animationDuration={3500} name="Debelost" />
                </AreaChart>
            </div>
        );
    }
}

export default BMIGraph;

The result of the current code

Upvotes: 10

Views: 23571

Answers (3)

thomasfl
thomasfl

Reputation: 159

Same solution as above, just using typescript and as a functional component:

import React from 'react';

export const CustomScatterDot: React.FC<{ cx: number, cy: number }> = ({ cx, cy }) => {
  return (
    <circle
        cx={cx - 10}
        cy={cy - 10}
        r={4}
        stroke='black'
        style={{opacity: "0.9"}}
        strokeWidth={2}
        fill={"green"} />
  );
};

Upvotes: 0

Kael Xu
Kael Xu

Reputation: 109

For customized dots. this.props already contains: cx: Number, cy: Number, stroke: String, payload: Object, value: Number

cx and cy are the coordinates you are after, and if you are interested in the data as well, this.props.payload is probably the one you want to use.

Upvotes: 3

Iniamudhan
Iniamudhan

Reputation: 508

You no need to pass X and Y axis data.

By using

const { cx, cy } = this.props;

cx & cy holds x, y position you required.

Try this in your CustomizedDot class

 class CustomizedDot extends React.Component {
    render() {
        const { cx, cy } = this.props;

        return (
            <circle cx={cx - 10} cy={cy - 10} r={25} stroke="black" strokeWidth={3} fill="red" />
        );
    }
  };

Upvotes: 17

Related Questions