ndrhzn/chart.js

## chart.js
  // add data

  const data =
  [{"letter":"а","count":129899,"share":8.8817824965317},
  {"letter":"б","count":23864,"share":1.63168967811325},
  {"letter":"в","count":68853,"share":4.70779120881375},
  {"letter":"г","count":22280,"share":1.52338442961629},
  {"letter":"ґ","count":647,"share":0.0442383180413707},
  {"letter":"д","count":36900,"share":2.52301999339502},
  {"letter":"е","count":65909,"share":4.50649660554668},
  {"letter":"є","count":1783,"share":0.121911779084643},
  {"letter":"ж","count":8742,"share":0.597730102500251},
  {"letter":"з","count":31548,"share":2.15707953256439},
  {"letter":"и","count":128999,"share":8.82024542352207},
  {"letter":"і","count":63057,"share":4.3114924586317},
  {"letter":"ї","count":1783,"share":0.121911779084643},
  {"letter":"й","count":36822,"share":2.51768678040085},
  {"letter":"к","count":57058,"share":3.9013136797597},
  {"letter":"л","count":52536,"share":3.59212407514907},
  {"letter":"м","count":31628,"share":2.16254949460969},
  {"letter":"н","count":102511,"share":7.00914099032295},
  {"letter":"о","count":117717,"share":8.04884402608351},
  {"letter":"п","count":52623,"share":3.59807265887334},
  {"letter":"р","count":84364,"share":5.76834847487202},
  {"letter":"с","count":64644,"share":4.42000283070536},
  {"letter":"т","count":103718,"share":7.09166904268143},
  {"letter":"у","count":45682,"share":3.12348507691792},
  {"letter":"ф","count":8508,"share":0.581730463517746},
  {"letter":"х","count":10124,"share":0.692223696832824},
  {"letter":"ц","count":11698,"share":0.799845200074118},
  {"letter":"ч","count":17090,"share":1.1685206419274},
  {"letter":"ш","count":9654,"share":0.660087669816681},
  {"letter":"щ","count":2822,"share":0.192952911147988},
  {"letter":"ь","count":20154,"share":1.37802018826242},
  {"letter":"ю","count":8171,"share":0.558688248401916},
  {"letter":"я","count":40745,"share":2.78592004419729}];

  // chart
  const chart = new G2.Chart({
     container : "viz" ,
     renderer: 'svg',
     forceFit: true,
     height : 600,
     padding: [ 80, 80, 80, 80 ],
     plotBackground: {
      fill: null
    },
    animate: true
  });

  const defs = {
    share: {
      type: "linear",
      alias: "частка літери у словнику, %"
    }
  };

  chart.axis("share", {
    title: {
      position: "end",
      offset: 30,
      textStyle: {
        textAlign: "right"
      }
    },
    ticks: [1, 10]
  });

  chart.axis('letter', {
    tickLine: null
  });

  chart.coord("rect",
    {innerRadius: 0.25})
    .transpose()
    .reflect("y");

  chart.source(data, defs)
    .interval()
    .position("letter*share")
    .color("#ce1256")
    .tooltip(false);

  chart.guide().
    text({
      position: ["б", 9],
      content: "Літера А становить\n майже 9% словника\n української мови. \nВона вживається\n 129.9 тисяч разів\n у 95.1 тисячах слів",
      style: {
        textAlign: "center"
      }
    });

    chart.guide().
      text({
        position: ["ф", 9],
        content: "Ф, Х, Ц, Ч, Ш та Щ,\nразом узяті,\n становлять всього лише\n 4.1% словника. \nВ сумі вони вживаються \n59.9 тисяч разів\n у 53 тисячах слів",
        style: {
          textAlign: "center"
        }
      });

  chart.render();

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>G2 - Letters Distribution</title>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7-beta.4/dist/g2.min.js"></script>
    <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">

    <style media="screen">
      body {
        display: grid;
        grid-template-columns: 0.5fr 1fr 0.5fr;
        font-family: 'Ubuntu Mono';
      }

      #viz {
        grid-column: 2;
        justify-content: center;
        background-color: #f7f7f7;
        min-width: 450px;
        max-width: 700px;
        }

      #viz text {
        font-family: 'Ubuntu Mono';
      }
    </style>

  </head>
  <body>

    <div id="viz">

    </div>
  </body>
  <script type="text/javascript" src='chart.js'></script>
</html>

## letter_positions.csv

          
            letter
            count
            share

            
              а
              129899
              8.8817824965317

            
              б
              23864
              1.63168967811325

            
              в
              68853
              4.70779120881375

            
              г
              22280
              1.52338442961629

            
              ґ
              647
              0.0442383180413707

            
              д
              36900
              2.52301999339502

            
              е
              65909
              4.50649660554668

            
              є
              1783
              0.121911779084643

            
              ж
              8742
              0.597730102500251

            
              з
              31548
              2.15707953256439

            
              и
              128999
              8.82024542352207

            
              і
              63057
              4.3114924586317

            
              ї
              1783
              0.121911779084643

            
              й
              36822
              2.51768678040085

            
              к
              57058
              3.9013136797597

            
              л
              52536
              3.59212407514907

            
              м
              31628
              2.16254949460969

            
              н
              102511
              7.00914099032295

            
              о
              117717
              8.04884402608351

            
              п
              52623
              3.59807265887334

            
              р
              84364
              5.76834847487202

            
              с
              64644
              4.42000283070536

            
              т
              103718
              7.09166904268143

            
              у
              45682
              3.12348507691792

            
              ф
              8508
              0.581730463517746

            
              х
              10124
              0.692223696832824

            
              ц
              11698
              0.799845200074118

            
              ч
              17090
              1.1685206419274

            
              ш
              9654
              0.660087669816681

            
              щ
              2822
              0.192952911147988

            
              ь
              20154
              1.37802018826242

            
              ю
              8171
              0.558688248401916

            
              я
              40745
              2.78592004419729

## thumbnail.png

      
    Raw
  

              thumbnail.png
	// add data

	const data =
	[{"letter":"а","count":129899,"share":8.8817824965317},
	{"letter":"б","count":23864,"share":1.63168967811325},
	{"letter":"в","count":68853,"share":4.70779120881375},
	{"letter":"г","count":22280,"share":1.52338442961629},
	{"letter":"ґ","count":647,"share":0.0442383180413707},
	{"letter":"д","count":36900,"share":2.52301999339502},
	{"letter":"е","count":65909,"share":4.50649660554668},
	{"letter":"є","count":1783,"share":0.121911779084643},
	{"letter":"ж","count":8742,"share":0.597730102500251},
	{"letter":"з","count":31548,"share":2.15707953256439},
	{"letter":"и","count":128999,"share":8.82024542352207},
	{"letter":"і","count":63057,"share":4.3114924586317},
	{"letter":"ї","count":1783,"share":0.121911779084643},
	{"letter":"й","count":36822,"share":2.51768678040085},
	{"letter":"к","count":57058,"share":3.9013136797597},
	{"letter":"л","count":52536,"share":3.59212407514907},
	{"letter":"м","count":31628,"share":2.16254949460969},
	{"letter":"н","count":102511,"share":7.00914099032295},
	{"letter":"о","count":117717,"share":8.04884402608351},
	{"letter":"п","count":52623,"share":3.59807265887334},
	{"letter":"р","count":84364,"share":5.76834847487202},
	{"letter":"с","count":64644,"share":4.42000283070536},
	{"letter":"т","count":103718,"share":7.09166904268143},
	{"letter":"у","count":45682,"share":3.12348507691792},
	{"letter":"ф","count":8508,"share":0.581730463517746},
	{"letter":"х","count":10124,"share":0.692223696832824},
	{"letter":"ц","count":11698,"share":0.799845200074118},
	{"letter":"ч","count":17090,"share":1.1685206419274},
	{"letter":"ш","count":9654,"share":0.660087669816681},
	{"letter":"щ","count":2822,"share":0.192952911147988},
	{"letter":"ь","count":20154,"share":1.37802018826242},
	{"letter":"ю","count":8171,"share":0.558688248401916},
	{"letter":"я","count":40745,"share":2.78592004419729}];

	// chart
	const chart = new G2.Chart({
	container : "viz" ,
	renderer: 'svg',
	forceFit: true,
	height : 600,
	padding: [ 80, 80, 80, 80 ],
	plotBackground: {
	fill: null
	},
	animate: true
	});

	const defs = {
	share: {
	type: "linear",
	alias: "частка літери у словнику, %"
	}
	};

	chart.axis("share", {
	title: {
	position: "end",
	offset: 30,
	textStyle: {
	textAlign: "right"
	}
	},
	ticks: [1, 10]
	});

	chart.axis('letter', {
	tickLine: null
	});

	chart.coord("rect",
	{innerRadius: 0.25})
	.transpose()
	.reflect("y");

	chart.source(data, defs)
	.interval()
	.position("letter*share")
	.color("#ce1256")
	.tooltip(false);

	chart.guide().
	text({
	position: ["б", 9],
	content: "Літера А становить\n майже 9% словника\n української мови. \nВона вживається\n 129.9 тисяч разів\n у 95.1 тисячах слів",
	style: {
	textAlign: "center"
	}
	});

	chart.guide().
	text({
	position: ["ф", 9],
	content: "Ф, Х, Ц, Ч, Ш та Щ,\nразом узяті,\n становлять всього лише\n 4.1% словника. \nВ сумі вони вживаються \n59.9 тисяч разів\n у 53 тисячах слів",
	style: {
	textAlign: "center"
	}
	});

	chart.render();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>G2 - Letters Distribution</title>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.2.7-beta.4/dist/g2.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.8.9/dist/data-set.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">

	<style media="screen">
	body {
	display: grid;
	grid-template-columns: 0.5fr 1fr 0.5fr;
	font-family: 'Ubuntu Mono';
	}

	#viz {
	grid-column: 2;
	justify-content: center;
	background-color: #f7f7f7;
	min-width: 450px;
	max-width: 700px;
	}

	#viz text {
	font-family: 'Ubuntu Mono';
	}
	</style>

	</head>
	<body>

	<div id="viz">

	</div>
	</body>
	<script type="text/javascript" src='chart.js'></script>
	</html>
letter	count	share
а	129899	8.8817824965317
б	23864	1.63168967811325
в	68853	4.70779120881375
г	22280	1.52338442961629
ґ	647	0.0442383180413707
д	36900	2.52301999339502
е	65909	4.50649660554668
є	1783	0.121911779084643
ж	8742	0.597730102500251
з	31548	2.15707953256439
и	128999	8.82024542352207
і	63057	4.3114924586317
ї	1783	0.121911779084643
й	36822	2.51768678040085
к	57058	3.9013136797597
л	52536	3.59212407514907
м	31628	2.16254949460969
н	102511	7.00914099032295
о	117717	8.04884402608351
п	52623	3.59807265887334
р	84364	5.76834847487202
с	64644	4.42000283070536
т	103718	7.09166904268143
у	45682	3.12348507691792
ф	8508	0.581730463517746
х	10124	0.692223696832824
ц	11698	0.799845200074118
ч	17090	1.1685206419274
ш	9654	0.660087669816681
щ	2822	0.192952911147988
ь	20154	1.37802018826242
ю	8171	0.558688248401916
я	40745	2.78592004419729