Data Visualization Development Tutorials, Guides & Insights

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");
    });

Now, when a user hovers over a bar, it changes color to orange, and reverts back when the mouse is moved away.

var options = {
    chart: {
        type: 'line',
        height: '100%',
        width: '100%'
    },
    series: [{
        name: 'Sales',
        data: [10, 20, 15, 30, 25, 40, 35]
    }],
    xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
    },
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: '100%'
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
}

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

chart.render();

ApexCharts provides options to export your charts as images or CSV files, making it easy to share your data.

No preview available for this content.

No preview available for this content.