JavaScript Chart

Set the greyScale property of the jqxChart. Author: http://jqwidgets.com

by adamrehman

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:530px; height:400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

var sampleData = [{
     "Coun.try": '09/08/2018',
     "Population-test": 1347350000,
     Percent: 19.18
 }, {
     "Coun.try": '09/09/2018',
     "Population-test": 1210193422,
     Percent: 17.22
 }, {
     "Coun.try": '09/10/2018',
     "Population-test": 313912000,
     Percent: 4.47
 }, {
     "Coun.try": '09/11/2018',
     "Population-test": 237641326,
     Percent: 3.38
 }, {
     "Coun.try": '09/12/2018',
     "Population-test": 192376496,
     Percent: 2.74
 }];
 // prepare jqxChart settings
 var settings = {
     showLegend: true,
     greyScale: true,
     colorScheme: 'scheme11',
     title: "Top 5 most populated countries",
     description: "Statistics for 2011",
     enableAnimations: true,
     padding: {
         left: 20,
         top: 5,
         right: 20,
         bottom: 5
     },
     titlePadding: {
         left: 90,
         top: 0,
         right: 0,
         bottom: 10
     },
     source: sampleData,
     categoryAxis: {
         dataField: "Coun.try",
         showGridLines: true,
         flip: false
     },
     seriesGroups: [{
         type: 'column',
         orientation: 'horizontal',
         columnsGapPercent: 100,
         toolTipFormatSettings: {
             thousandsSeparator: ','
         },
         valueAxis: {
             flip: false,
             unitInterval: 100000000,
             maxValue: 1500000000,
             displayValueAxis: true,
             description: '',
             formatFunction: function (value) {
                 return parseInt(value / 1000000);
             }
         },
         series: [{
             dataField: "Population-test",
             displayText: 'Population'
         }]
     }]
 };
 // setup the chart
 $('#jqxChart').jqxChart(settings);