JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

CSS

#container {
	min-width: 320px;
	height: 400px;
	margin: 0 auto;
}

JavaScript

var testdata = [
  ["UserName", "Amount", "GP", "Quantity"],
  ["Demo1", 100, 40, 4],
  ["Demo2", 500, 450, 6],
  ["Demo3", 200, 50, 0.55]
];

Highcharts.chart('container', {
		chart: {
			type: 'line',  //'line',
			zoomType: 'xy'
		},
		credits: {
			enabled: false
		},
		title: {
			text: 'Testing'
		},

		xAxis: {
			title: {
				text: 'LabX'
			}
		},
		yAxis: [
      {
      	title: {
        	text: 'Amount'
        },
        opposite: true
      },
			{
				title: {
					text: 'USD'
				}
			},
			{
				title: {
					text: 'Quantity Unit'
				},
				opposite:true
			}
		],
		noData: {
			 style: {
				 fontWeight: 'bold',
				 fontSize: '15px',
				 color: '#303030'
			 }
		},
    
    series: [{// First series
    	type: 'line',
      yAxis: 0
    }, {// Second series
    	type: 'line',
      yAxis: 1
    }, {// Third (Quantity) series
    	type: 'line',
    	yAxis: 2
    }],
    
		data: {
			rows: testdata,
			seriesMapping: [{
				x:0,
				y:1
			},{
				x:0,
				y:2
			},{
				x:0,
				y:3
			}]
		}
	});