DEV Community

Cover image for How to integrate line chart in card [React]
Maruf Khan
Maruf Khan

Posted on

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 -

Image description

Thanks for your time. I really appreciate your contribution πŸ’—πŸ™

Top comments (2)

oldi92 profile image

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.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)
.attr('transform', 'translate(' + MARGIN.left + ',' + + ')');
const line = d3_line()
.x((d, i) => x(i))
.y(d => y(d));
.attr('fill', 'none')
.attr('stroke', '#bbb')
.attr('stroke-width', 1)
.attr('d', line);
.attr('r', 2)
.attr('cx', x(0))
.attr('cy', y(data[0]))
.attr('fill', 'steelblue');
.attr('r', 2)
.attr('cx', x(DATA_COUNT - 1))
.attr('cy', y(data[DATA_COUNT - 1]))
.attr('fill', 'tomato');

oldi92 profile image
oldi92 • Edited

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