Note: I tried testing ChatGPT to produce more complex code! But this one failed miserably. Read on.


Rendering a Sankey diagram in React using SVG can be a complex task as it involves creating paths and managing node positions. There are libraries available that simplify the process, such as react-sankey or d3-sankey. However, if you prefer to implement it manually, here’s an example code snippet to get you started:

import React from 'react';

const SankeyDiagram = ({ data, width, height }) ={
  const { nodes, links } = data;

  const nodeWidth = 20;
  const nodePadding = 8;

  const maxLinkValue = Math.max(...links.map(link
Read More

To render a pie chart in React using SVG, you can create a reusable component that takes data as input and generates the SVG elements accordingly. Here’s an example code snippet that demonstrates how to do this:

import React from 'react';

const PieChart = ({ data, width, height }) ={
  const total = data.reduce((sum, { value }) =sum + value, 0);
  const center = width / 2;
  const radius = Math.min(width,
Read More

To render a line chart in React using SVG, you can create a reusable component that takes data as input and generates the SVG elements accordingly. Here’s an example code snippet that demonstrates how to do this:

import React from 'react';

const LineChart = ({ data, width, height, lineColor }) ={
  const maxValue = Math.max(...data);
  const xScale = width / (data.length
Read More

To render a bar chart in React using SVG, you can create a reusable component that takes data as input and generates the SVG elements accordingly. Here’s an example code snippet that demonstrates how to do this:

import React from 'react';

const BarChart = ({ data, width, height, barColor }) ={
  const barWidth = width / data.length;
  const maxValue = Math.max(...data);
Read More

It is easy to convert an SVG element into an image. Serialize the SVG element into a Base64 string and set the image src attribute.

const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElem);
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + Base64.encode(svgString);

It is easy to save the image to a file. We do this using the Canvas toBlob and window saveAs API.…

Read More

There are several packages to create a Bar chart in React. But consider the scenario where we want to create a highly specialised Bar chart in one of our pages. In this case, my recommendation is to avoid community packages which are usually bloated with too many features or does not have the feature that we need. In this tutorial, I will show how to create a Bar chart in React using SVG components, D3 functions for math and react-move for animations.…

Read More

Our UX Designer gave a SVG icon. Within the SVG icon, we want to add a badge.

At first glance, I was tinkering with the idea of absolutely positioning the badge within the SVG icon.

But there is a better alternative. SVG has a text element. It is possible to add a text element to the SVG icon provided by the designer.…

Read More