D3.js Pie Chart 
<!DOCTYPE html>
  <html>
  <head>
  <title>Pie Chart Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  </head>
<body>
<svg id="chart"></svg>

  <script>
    // Sample data for the pie chart
    const data = [
      { label: "Category 1", value: 30 },
      { label: "Category 2", value: 50 },
      { label: "Category 3", value: 20 }
    ];

    // Set the dimensions and margins of the chart
    const width = 400;
    const height = 400;
    const radius = Math.min(width, height) / 2;

    // Create a color scale
    const color = d3.scaleOrdinal(d3.schemeCategory10);

    // Create a pie layout
    const pie = d3.pie()
      .value(d => d.value)
      .sort(null);

    // Define the arc for each slice of the pie
    const arc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius);

    // Create the SVG container
    const svg = d3.select("#chart")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", `translate(${width / 2}, ${height / 2})`);

    // Generate the pie slices
    const slices = svg.selectAll("path")
      .data(pie(data))
      .enter()
      .append("path")
      .attr("d", arc)
      .attr("fill", (d, i) => color(i));

    // Add labels to each slice
    slices.append("text")
      .attr("transform", d => `translate(${arc.centroid(d)})`)
      .attr("text-anchor", "middle")
      .text(d => d.data.label);

      </script>
</body>
</html>

A popular framework used to create graphics (graphs, pies, charts) using JavaScript. Above is a easily modifiable pie chart.

Graphics JS
D3.js Bar Chart 
<!DOCTYPE html>
<html>
<head>
  <title>Bar Chart Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    .bar {
      fill: steelblue;
    }
    </style>
</head>
<body>
  <svg id="chart"></svg>

  <script>
    // Sample data for the bar chart
    const data = [
      { label: "Category 1", value: 30 },
      { label: "Category 2", value: 50 },
      { label: "Category 3", value: 20 },
      { label: "Category 4", value: 40 },
      { label: "Category 5", value: 10 }
    ];

    // Set the dimensions and margins of the chart
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const width = 600 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;

    // Create the SVG container
    const svg = d3.select("#chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    // Set the x and y scales
    const x = d3.scaleBand()
      .range([0, width])
      .padding(0.1)
      .domain(data.map(d => d.label));

    const y = d3.scaleLinear()
      .range([height, 0])
      .domain([0, d3.max(data, d => d.value)]);

    // Create the bars
    svg.selectAll(".bar")
      .data(data)
      .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", d => x(d.label))
      .attr("width", x.bandwidth())
      .attr("y", d => y(d.value))
      .attr("height", d => height - y(d.value));

    // Add labels to each bar
    svg.selectAll(".label")
      .data(data)
      .enter()
      .append("text")
      .attr("class", "label")
      .attr("x", d => x(d.label) + x.bandwidth() / 2)
      .attr("y", d => y(d.value) - 5)
      .attr("text-anchor", "middle")
      .text(d => d.value);

    // Add x-axis
    svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

    // Add y-axis
    svg.append("g")
      .call(d3.axisLeft(y));

  </script>
</body>
</html>

A bar chart made with D3.js.

Graphics JS
D3.js Line Chart 
<!DOCTYPE html>
<html>
<head>
  <title>Line Chart Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <svg id="chart"></svg>

  <script>
    // Sample data for the line chart
    const data = [
      { year: 2010, value: 10 },
      { year: 2011, value: 20 },
      { year: 2012, value: 15 },
      { year: 2013, value: 25 },
      { year: 2014, value: 30 },
      { year: 2015, value: 18 },
      { year: 2016, value: 22 },
      { year: 2017, value: 28 },
      { year: 2018, value: 35 },
      { year: 2019, value: 40 },
      { year: 2020, value: 32 }
    ];

    // Set the dimensions and margins of the chart
    const margin = { top: 20, right: 20, bottom: 30, left: 40 };
    const width = 600 - margin.left - margin.right;
    const height = 400 - margin.top - margin.bottom;

    // Create the SVG container
    const svg = d3.select("#chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", `translate(${margin.left}, ${margin.top})`);

    // Set the x and y scales
    const x = d3.scaleLinear()
      .domain(d3.extent(data, d => d.year))
      .range([0, width]);

    const y = d3.scaleLinear()
      .domain([0, d3.max(data, d => d.value)])
      .range([height, 0]);

    // Define the line
    const line = d3.line()
      .x(d => x(d.year))
      .y(d => y(d.value));

    // Draw the line
    svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 2)
      .attr("d", line);

    // Add x-axis
    svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x).ticks(5));

    // Add y-axis
    svg.append("g")
      .call(d3.axisLeft(y));

  </script>
</body>
</html>

A line chart made with D3.js.

Graphics JS