How to integrate line chart in card [React]

I am making a dashboard/admin panel where I wish to show cards. In the card element, I want to put standalone line chart like the picture below -

Thanks for your time. I really appreciate your contribution 💗🙏

Comments

[oldi92]


import {
line as d3_line,
range as d3_range,
select as d3_select,
scaleLinear as d3_scaleLinear
} from 'd3';
const WIDTH = 200;
const HEIGHT = 30;
const MARGIN = { top: 5, right: 5, bottom: 5, left: 5 };
const INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;
const INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;
const DATA_COUNT = 40;
const data = d3_range(DATA_COUNT).map( d => Math.random() );
const x = d3_scaleLinear().domain([0, DATA_COUNT]).range([0, INNER_WIDTH]);
const y = d3_scaleLinear().domain([0, 1]).range([INNER_HEIGHT, 0]);
const svg = d3_select('#sparklines').append('svg')
.attr('width', WIDTH)
.attr('height', HEIGHT)
.append('g')
.attr('transform', 'translate(' + MARGIN.left + ',' + MARGIN.top + ')');
const line = d3_line()
.x((d, i) => x(i))
.y(d => y(d));
svg.append('path').datum(data)
.attr('fill', 'none')
.attr('stroke', '#bbb')
.attr('stroke-width', 1)
.attr('d', line);
svg.append('circle')
.attr('r', 2)
.attr('cx', x(0))
.attr('cy', y(data[0]))
.attr('fill', 'steelblue');
svg.append('circle')
.attr('r', 2)
.attr('cx', x(DATA_COUNT - 1))
.attr('cy', y(data[DATA_COUNT - 1]))
.attr('fill', 'tomato');


[oldi92]

Hello @whoismaruf, that's and sparkline that's how is called because i a plain line without axis. You can build that with D3 framework here's a sparkline