Bar Chart Development Tutorials, Guides & Insights

One of the strengths of D3.js is its ability to add interactivity to visualizations. Let’s add a simple hover effect that changes the color of a bar when the user hovers over it.

svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", (d, i) => xScale(i))
    .attr("y", d => yScale(d))
    .attr("width", xScale.bandwidth())
    .attr("height", d => height - yScale(d))
    .attr("fill", "steelblue")
    .on("mouseover", function () {
        d3.select(this).attr("fill", "orange");
    })
    .on("mouseout", function () {
        d3.select(this).attr("fill", "steelblue");
    });

var options = {
    chart: {
        type: 'line',
        toolbar: {
            show: true,
            tools: {
                download: true
            }
        }
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 15, 30, 25, 40, 35]
    }],
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    title: {
        text: 'Sales Data with Export Option',
        align: 'center'
    }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

ApexCharts can be easily integrated with popular JavaScript frameworks like React, Vue, and Angular.