JSFiddle - React, Tailwind, and code Playground

by tczagany

HTML

<!DOCTYPE html>
<html>
	<body>
		<div id="myVizzu" style="width:640px; height:360px;"></div>
		<script type="module" src="fiddle-01.js"></script>
	</body>
</html>

JavaScript

import Vizzu from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vizzu.min.js';
import { data } from 'https://tczagany.github.io/vizzu-example/data_by_filename.js';

let chart = new Vizzu('myVizzu');

chart.initializing
.then(chart => chart.animate({
	data: data,
  config: {
	  channels: {
      x: 'File name',
      y: 'Line count',
    },
    title: 'Files by line count'
  },
  style: { plot: { xAxis: { label: { color: '#FFFFFF00' } } } },
}))
.then(chart => chart.animate({
	config: {
  	sort: 'byValue',   
   	reverse: true,
    title: 'Files by line count in order'
  }
}))
.then(chart => chart.animate({
	config: {
  	channels: {
    	y:['Line count','Language'],
      x: 'File name',
      color: 'Language'
    },
    legend: null,
    title: 'Language on color'
  },
}))
.then(chart => chart.animate({
	config: {
  	channels: {
    	y: 'Language',
      x: ['File name','Line count'],
      label: null
    },
    reverse: 'false',
    title: 'Total line count by language'
	}
}))
.then(chart => chart.animate({
  config: {
    channels: {
      x: 'Line count',
      label: 'Line count'
    },
    title: 'Total line count by language'
  }
}));