Interactive Line Chart

← Back to Demos

This interactive line chart demonstrates smooth curve animations, progressive fill effects, and real-time value tracking. The implementation uses advanced SVG path generation and Catmull-Rom splines to create fluid, professional-grade financial data visualisations.

£5,000
£0

Graph Builder

During the early stages of development, it can be challenging to input realistic data for graph visualisation testing. This interactive graph builder tool allows you to quickly create and experiment with different data patterns, making it easier to prototype and refine your data visualisation components.

Create your own custom graph by clicking to add points. Click and drag points to move them, or double-click to remove them.

Click to add points
Points: 0

Implementation

The interactive line chart demonstrates smooth curve animations, progressive fill effects, and real-time value tracking. The implementation uses advanced SVG path generation and Catmull-Rom splines to create fluid, professional-grade financial data visualisations.

CSS Transitions
.graph-bar {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px 4px 0 0;
}

.graph-bar:hover {
  opacity: 0.8;
  transform: scaleY(1.02);
}

The JavaScript handles real-time data updates and statistics calculation.

Dynamic Updates
updateGraph(sliderValue) {
  const multiplier = sliderValue / 50;
  const bars = this.graphBars.children;

  for (let i = 0; i < this.barCount; i++) {
    const newValue = Math.max(5, Math.min(100,
      this.baseData[i] * multiplier));
    bars[i].style.height = newValue + '%';

    // Update colors based on value
    if (newValue > 70) {
      bars[i].className = 'graph-bar bg-green-400';
    }
  }
}

Key Features