[Vuejs]-D3.JS Bar chart rounded corners

by

3👍

✅

You can add stylings to the Vector graphics and can add border or make changes to it.

Please check if this is what you are looking for.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <script src="https://unpkg.com/vue"></script>
        <script src="https://d3js.org/d3.v6.js"></script>
      </head>
      <body>
        <div class="p-3 flex flex-col" id="one">
          <div class="w-full flex-1">
            <div id="my_dataviz"></div>
          </div>
        </div>

        <script>
          new Vue({
            el: '#one',
            data: {
              type: Array,
              required: true,
            },
  mounted() {
            
            var data = [
      { key: "One", value: 33 },
      { key: "Two", value: 30 },
      { key: "Three", value: 37 },
      { key: "Four", value: 28 },
      { key: "Five", value: 25 },
      { key: "Six", value: 15 }
    ];
    // set the dimensions and margins of the graph
    var margin = { top: 20, right: 20, bottom: 30, left: 40 },
      width = 500 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    // set the ranges
    var x = d3
      .scaleBand()
      .range([0, width])
      .padding(0.1);
    var y = d3.scaleLinear().range([height, 0]);

    // append the svg object to the body of the page
    // append a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
      .select("#my_dataviz")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', `translate(${margin.left}, ${margin.top})`);

    const xAxis = d3.axisBottom(x);
    const yAxis = d3.axisLeft(y).ticks(5);;


    // format the data
    data.forEach(function(d) {
      d.value = +d.value;
    });

    // Scale the range of the data in the domains
    x.domain(
      data.map(function(d) {
        return d.key;
      })
    );
    y.domain([
      0,
      d3.max(data, function(d) {
        return d.value;
      })
    ]);

    //Defenining the tooltip div
    let tooltip = d3
      .select("body")
      .append("div")
      .attr("class", "tooltip")
      .style("position", "absolute")
      .style("top", 0)
      .style("left", 0)
      .style("opacity", 0);

    // append the rectangles for the bar chart
    const rx = 12;
    const ry = 12;
    svg
      .selectAll(".bar")
      .data(data)
      .enter()
      .append("path")
      .attr("class", "bar")
      .attr("x", function(d) {
        return x(d.key);
      })
      .attr("width", x.bandwidth())
      .attr("y", function(d) {
        return y(d.value);
      })
      .attr("height", function(d) {
        return height - y(d.value);
      })
      .attr("fill", "#206BF3")
      .attr(
        "d",
        item => `
        M${x(item.key)},${y(item.value) + ry}
        a${rx},${ry} 0 0 1 ${rx},${-ry}
        h${x.bandwidth() - 2 * rx}
        a${rx},${ry} 0 0 1 ${rx},${ry}
        v${height - y(item.value) - ry}
        h${-x.bandwidth()}Z
      `
      )
      .on("mouseover", (e, i) => {
        d3.select(e.currentTarget).style("fill", "red");
        tooltip
          .transition()
          .duration(200)
          .style("opacity", 0.9);
        tooltip
          .html(
            `<div><h1>${i.key} 2020</h1><p>${this.addPointsToEveryThousand(
              i.value
            )} kWh</p></div>`
          )
          .style("left", e.pageX + "px")
          .style("top", e.pageY - 28 + "px");
      })
      .on("mouseout", e => {
        d3.select(e.currentTarget).style("fill", "#206BF3");
        tooltip
          .transition()
          .duration(500)
          .style("opacity", 0);
      });

    // add the x Axis
    svg
      .append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // add the y Axis
    svg.append("g").call(d3.axisLeft(y));
  },
  methods: {
    addPointsToEveryThousand(amount) {
      return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    }
  }
          });
        </script>
      </body>
    </html>

</body>
</html>

I’ve added only this attribute to make it work

 M${x(item.key)},${y(item.value) + ry}
        a${rx},${ry} 0 0 1 ${rx},${-ry}
        h${x.bandwidth() - 2 * rx}
        a${rx},${ry} 0 0 1 ${rx},${ry}
        v${height - y(item.value) - ry}
        h${-x.bandwidth()}Z
👤Arjun Kanungo

Leave a comment