Introduction to Vizzu

Vizzu is a cutting-edge data visualization library that transforms how you create interactive charts. It helps to produce dynamic, animated charts with minimal effort. Here is a detailed guide to understanding Vizzu with dozens of API examples.

Installation

  npm install vizzu

Basic Setup

  import Vizzu from 'vizzu';
  
  let data = {
    series: [
      { name: 'Foo', values: [15, 32, 18] },
      ...
    ]
  };
  
  let chart = new Vizzu('myChart', { data });

Adding Data

  chart.addData({
    series:{
      name: 'Bar',
      values: [27, 44, 31]
    }
  });

Setting Up Axis

  chart.config({
    x: 'Foo',
    y: 'Bar'
  });

Customizing Appearance

  chart.animate({
    style: {
      plot: {
        marker: {
          size: 20
        }
      }
    }
  });

Changing Chart Types

  chart.animate({
    config: {
      channels: {
        color: { set: 'Foo' },
        size: { set: 'Bar' }
      }
    }
  });

Advanced Animations

  chart.animate({
    config: {
      channels: {
        x: { attach: 'Baz' },
        y: { detach: 'Foo' }
      }
    }
  });

Interactivity

  chart.on('click', (eventData) => {
    console.log('Chart clicked!', eventData);
  });

Full App Example

  import Vizzu from 'vizzu';

  let data = {
    series: [
      { name: 'Product', values: ['A', 'B', 'C'] },
      { name: 'Sales', values: [15, 32, 18] }
    ]
  };

  let chart = new Vizzu('myChart', {
    data: data,
    config: {
      channels: {
        x: { set: 'Product' },
        y: { set: 'Sales' }
      },
      title: "Product Sales"
    }
  });

  chart.animate({
    style: {
      plot: {
        marker: {
          size: 10
        }
      }
    }
  });

With Vizzu, you can create various types of interactive charts effortlessly, making your data visualization tasks much simpler. Embrace Vizzu for your next visualization project and witness the difference it brings!

Hash: d9ce11aff55cc8c7f064ae22698e16d601b59d78df5f5245d1ccc9041807f9b5