<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background-color: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 530px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // CHART CONFIG
// -----------------------------
let chartConfig = {
graphset: [{
type: 'area',
title: {
mediaRules: [{
text: 'New vs. Updates',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
paddingLeft: '11%',
textAlign: 'left',
},
{
text: 'Downloads vs. Updates',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
marginTop: '2%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
marginTop: '2%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
fontSize: '12px',
height: '16%',
marginTop: '2%',
minWidth: '1024px',
paddingLeft: '16%',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'iOS',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
marginTop: '18%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'iOS',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
marginTop: '19%',
minWidth: '1024px',
paddingLeft: '16%',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
aspect: 'spline',
marker: {
visible: false,
},
},
plotarea: {
mediaRules: [{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: 100,
minValue: 0,
tick: {
visible: false,
},
},
mediaRules: [{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '0px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '0px',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '0px',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '0px',
y: '0px',
},
],
series: [{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#5AC8FA',
legendMarker: {
backgroundColor: '#007AFF',
},
legendText: 'New',
lineColor: '#007AFF',
},
{
values: [12, 20, 35, 61, 42, 45, 50, 61],
backgroundColor: '#FF3B30',
legendMarker: {
backgroundColor: '#FF2D55',
},
legendText: 'Updates',
lineColor: '#FF2D55',
},
],
},
{
type: 'bar',
title: {
mediaRules: [{
text: 'Paid vs. Free',
paddingLeft: '11%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Paid Users vs. Free',
marginTop: '2%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
paddingLeft: '16%',
fontSize: '12px',
height: '16%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'iOS',
marginTop: '18%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'iOS',
marginTop: '19%',
paddingLeft: '16%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: 100,
minValue: 0,
tick: {
visible: false,
},
},
mediaRules: [{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '0px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '15%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '25%',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '25%',
y: '0px',
},
],
series: [{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#007AFF',
legendText: 'Paid',
},
{
values: [12, 20, 35, 61, 42, 45, 50, 61],
backgroundColor: '#FF2D55',
legendText: 'Free',
},
],
},
{
type: 'area',
title: {
mediaRules: [{
text: 'New vs. Updates',
paddingLeft: '11%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Downloads vs. Updates',
marginTop: '2%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
marginTop: '2%',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
marginTop: '2%',
paddingLeft: '16%',
fontSize: '12px',
height: '16%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'Android',
marginTop: '18%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Android',
marginTop: '19%',
paddingLeft: '16%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
aspect: 'spline',
marker: {
visible: false,
},
},
plotarea: {
backgroundColor: '#fff',
mediaRules: [{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: '300px',
minValue: '0px',
tick: {
visible: false,
},
},
mediaRules: [{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '45%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '0px',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '50%',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '50%',
y: '0px',
},
],
series: [{
values: [210, 251, 263, 235, 248, 254, 210, 199],
backgroundColor: '#92C163',
legendMarker: {
backgroundColor: '#92C163',
lineColor: '#76AA38',
},
legendText: 'New',
lineColor: '#92C163',
},
{
values: [162, 187, 196, 140, 154, 132, 165, 141],
backgroundColor: '#50584C',
legendText: 'Updates',
lineColor: '#50584C',
},
],
},
{
type: 'bar',
title: {
mediaRules: [{
text: 'Paid vs. Free',
paddingLeft: '11%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Paid Users vs. Free',
marginTop: '2%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
paddingLeft: '16%',
fontSize: '12px',
height: '16%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
backgroundColor: '#90C653',
mediaRules: [{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'Android',
marginTop: '18%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Android',
marginTop: '19%',
paddingLeft: '16%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: 100,
minValue: 0,
tick: {
visible: false,
},
},
mediaRules: [{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '45%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '15%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '75%',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '75%',
y: '0px',
},
],
series: [{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#76AA38',
legendText: 'Paid',
lineColor: '#76AA38',
},
{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#50584C',
legendText: 'Free',
lineColor: '#50584C',
},
],
},
{
type: 'bar',
title: {
mediaRules: [{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '12px',
height: '13%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Top 3',
paddingLeft: '11%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '12px',
height: '9%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#007AFF',
height: '5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#007AFF',
fontSize: '9px',
height: '5%',
minWidth: '1024px',
},
],
},
plot: {
tooltip: {
offsetY: '-5px',
placement: 'node:top',
},
valueBox: {
text: '%t',
fontColor: '#fff',
placement: 'top-in',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [{
margin: '20% 5% 20% 10%',
maxWidth: '399px',
},
{
margin: '15% 5% 20% 15%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '20% 3% 18% 8%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '20% 3% 18% 8%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
fontColor: '#333',
},
labels: ['September 2020'],
},
scaleY: {
guide: {
lineStyle: 'solid',
},
multiplier: true,
step: 2500,
},
mediaRules: [{
maxWidth: '399px',
width: '100%',
height: '30%',
x: '0px',
y: '15%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '40%',
x: '0px',
y: '30%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '45%',
x: '0px',
y: '20%',
},
{
minWidth: '1024px',
width: '50%',
height: '45%',
x: '0px',
y: '20%',
},
],
series: [{
text: 'iPhone<br>6',
values: [6845],
backgroundColor: '#007AFF',
},
{
text: 'iPhone<br>6s',
values: [8954],
backgroundColor: '#FF2D55',
},
{
text: 'iPhone<br>7',
values: [4251],
backgroundColor: '#5856D6',
},
],
},
{
type: 'bar',
title: {
mediaRules: [{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '12px',
height: '13%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Top 3',
paddingLeft: '11%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '12px',
height: '9%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#90C653',
height: '5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#90C653',
fontSize: '9px',
height: '5%',
minWidth: '1024px',
},
],
},
plot: {
tooltip: {
offsetY: '-5px',
placement: 'node:top',
},
valueBox: {
text: '%t',
fontColor: '#fff',
placement: 'top-in',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [{
margin: '20% 5% 20% 10%',
maxWidth: '399px',
},
{
margin: '15% 5% 20% 15%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '20% 3% 18% 8%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '20% 3% 18% 8%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
fontColor: '#333',
},
labels: ['September 2020'],
},
scaleY: {
guide: {
lineStyle: 'solid',
},
multiplier: true,
step: 1000,
},
mediaRules: [{
maxWidth: '399px',
width: '100%',
height: '30%',
x: '0px',
y: '60%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '40%',
x: '50%',
y: '30%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '45%',
x: '50%',
y: '20%',
},
{
minWidth: '1024px',
width: '50%',
height: '45%',
x: '50%',
y: '20%',
},
],
series: [{
text: 'Galaxy<br>Note 20',
values: [3425],
backgroundColor: '#76AA38',
},
{
text: 'Galaxy<br>S20',
values: [2921],
backgroundColor: '#50584C',
},
{
text: 'Galaxy<br>S10',
values: [2745],
backgroundColor: '#FFC208',
},
],
},
{
type: 'null',
title: {
mediaRules: [{
text: 'Limited Mobile View',
backgroundColor: '#ccc',
fontColor: '#333',
maxWidth: '399px',
},
{
text: '',
fontColor: 'none',
minWidth: '399px',
},
{
text: '',
fontColor: 'none',
maxWidth: '1024px',
minWidth: '768px',
},
{
text: '',
fontColor: 'none',
minWidth: '1024px',
},
],
},
mediaRules: [{
maxWidth: '399px',
width: '100%',
height: '10%',
x: '0px',
y: '90%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '0px',
height: '0px',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '0px',
height: '0px',
},
{
minWidth: '1024px',
width: '0px',
height: '0px',
},
],
},
{
type: 'gauge',
backgroundColor: '#007AFF',
plot: {
borderWidth: '0px',
csize: '6px',
},
scale: {
sizeFactor: 1.1,
},
scaleR: {
center: {
backgroundColor: '#fff',
borderColor: '#007AFF',
size: '6px',
},
guide: {
lineColor: '#d8d6d6',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
offsetR: -3,
},
markers: [{
type: 'area',
backgroundColor: '#FF2D55',
range: [0, 0],
}, ],
ring: {
backgroundColor: '#FF2D55',
size: '4px',
},
step: 5,
tick: {
lineColor: '#333',
placement: 'out',
size: '5px',
},
},
mediaRules: [{
maxWidth: '399px',
width: '0px',
height: '0px',
x: '-200px',
y: '-200px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '30%',
x: '0px',
y: '70%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '35%',
x: '0px',
y: '65%',
},
{
minWidth: '1024px',
width: '50%',
height: '35%',
x: '0px',
y: '65%',
},
],
series: [{
text: 'iPhone X',
values: [6],
tooltip: {
backgroundColor: '#007AFF',
},
backgroundColor: '#007AFF',
},
{
text: 'iPhone 11',
values: [14],
tooltip: {
backgroundColor: '#FF2D55',
},
backgroundColor: '#FF2D55',
},
{
text: 'iPhone 11 Pro',
values: [21],
tooltip: {
backgroundColor: '#5856D6',
},
backgroundColor: '#5856D6',
},
],
},
{
type: 'gauge',
backgroundColor: '#92C163',
plot: {
borderWidth: '0px',
csize: '5px',
},
scale: {
sizeFactor: 1.1,
},
scaleR: {
center: {
backgroundColor: '#fff',
borderColor: '#84B34C',
size: '6px',
},
guide: {
lineColor: '#d8d6d6',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
offsetR: -3,
},
markers: [{
type: 'area',
alpha: 0.9,
backgroundColor: '#50584C',
range: [0, 0],
}, ],
ring: {
backgroundColor: '#50584C',
size: '4px',
},
step: 5,
tick: {
lineColor: '#333',
placement: 'out',
size: '5px',
},
},
mediaRules: [{
maxWidth: '399px',
width: '0px',
height: '0px',
x: '-200px',
y: '-200px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '30%',
x: '50%',
y: '70%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '35%',
x: '50%',
y: '65%',
},
{
minWidth: '1024px',
width: '50%',
height: '35%',
x: '50%',
y: '65%',
},
],
series: [{
values: [10],
tooltip: {
backgroundColor: '#84B34C',
},
backgroundColor: '#84B34C',
},
{
values: [15],
tooltip: {
backgroundColor: '#50584C',
},
backgroundColor: '#50584C',
},
{
values: [17],
tooltip: {
backgroundColor: '#FFC208',
},
backgroundColor: '#FFC208',
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
</script>
</body>
</html>
// CHART CONFIG
// -----------------------------
let chartConfig = {
graphset: [
{
type: 'area',
title: {
mediaRules: [
{
text: 'New vs. Updates',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
paddingLeft: '11%',
textAlign: 'left',
},
{
text: 'Downloads vs. Updates',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
marginTop: '2%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
marginTop: '2%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
fontSize: '12px',
height: '16%',
marginTop: '2%',
minWidth: '1024px',
paddingLeft: '16%',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [
{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'iOS',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
marginTop: '18%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'iOS',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
marginTop: '19%',
minWidth: '1024px',
paddingLeft: '16%',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [
{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
aspect: 'spline',
marker: {
visible: false,
},
},
plotarea: {
mediaRules: [
{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: 100,
minValue: 0,
tick: {
visible: false,
},
},
mediaRules: [
{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '0px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '0px',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '0px',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '0px',
y: '0px',
},
],
series: [
{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#5AC8FA',
legendMarker: {
backgroundColor: '#007AFF',
},
legendText: 'New',
lineColor: '#007AFF',
},
{
values: [12, 20, 35, 61, 42, 45, 50, 61],
backgroundColor: '#FF3B30',
legendMarker: {
backgroundColor: '#FF2D55',
},
legendText: 'Updates',
lineColor: '#FF2D55',
},
],
},
{
type: 'bar',
title: {
mediaRules: [
{
text: 'Paid vs. Free',
paddingLeft: '11%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Paid Users vs. Free',
marginTop: '2%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
paddingLeft: '16%',
fontSize: '12px',
height: '16%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [
{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'iOS',
marginTop: '18%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'iOS',
marginTop: '19%',
paddingLeft: '16%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [
{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [
{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: 100,
minValue: 0,
tick: {
visible: false,
},
},
mediaRules: [
{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '0px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '15%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '25%',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '25%',
y: '0px',
},
],
series: [
{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#007AFF',
legendText: 'Paid',
},
{
values: [12, 20, 35, 61, 42, 45, 50, 61],
backgroundColor: '#FF2D55',
legendText: 'Free',
},
],
},
{
type: 'area',
title: {
mediaRules: [
{
text: 'New vs. Updates',
paddingLeft: '11%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Downloads vs. Updates',
marginTop: '2%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
marginTop: '2%',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'New Downloads vs. Updates',
marginTop: '2%',
paddingLeft: '16%',
fontSize: '12px',
height: '16%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [
{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'Android',
marginTop: '18%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Android',
marginTop: '19%',
paddingLeft: '16%',
backgroundColor: '#92C163',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [
{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
aspect: 'spline',
marker: {
visible: false,
},
},
plotarea: {
backgroundColor: '#fff',
mediaRules: [
{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: '300px',
minValue: '0px',
tick: {
visible: false,
},
},
mediaRules: [
{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '0px',
y: '45%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '0px',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '50%',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '50%',
y: '0px',
},
],
series: [
{
values: [210, 251, 263, 235, 248, 254, 210, 199],
backgroundColor: '#92C163',
legendMarker: {
backgroundColor: '#92C163',
lineColor: '#76AA38',
},
legendText: 'New',
lineColor: '#92C163',
},
{
values: [162, 187, 196, 140, 154, 132, 165, 141],
backgroundColor: '#50584C',
legendText: 'Updates',
lineColor: '#50584C',
},
],
},
{
type: 'bar',
title: {
mediaRules: [
{
text: 'Paid vs. Free',
paddingLeft: '11%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '10px',
height: '18%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Paid Users vs. Free',
marginTop: '2%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '11px',
height: '20%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
backgroundColor: 'none',
fontSize: '12px',
height: '16%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Paid Users vs. Free Users',
marginTop: '2%',
paddingLeft: '16%',
fontSize: '12px',
height: '16%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
backgroundColor: '#90C653',
mediaRules: [
{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: 'Android',
marginTop: '18%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '8px',
height: '12%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Android',
marginTop: '19%',
paddingLeft: '16%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '9px',
height: '13%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
legend: {
backgroundColor: 'none',
borderColor: 'none',
borderWidth: '0px',
item: {
fontColor: '#444',
},
mediaRules: [
{
maxWidth: '1024px',
minWidth: '10px',
visible: false,
},
{
align: 'left',
minWidth: '1024px',
verticalAlign: 'middle',
},
],
shadow: false,
toggleAction: 'remove',
},
plot: {
tooltip: {
offsetY: '0px',
placement: 'node:top',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [
{
margin: '45% 5% 5% 5%',
maxWidth: '399px',
},
{
margin: '40% 5% 5% 5%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '45% 5% 10% 5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '30% 4% 4% 4%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
visible: false,
},
lineColor: 'none',
tick: {
visible: false,
},
},
scaleY: {
guide: {
visible: false,
},
item: {
visible: false,
},
lineColor: 'none',
maxValue: 100,
minValue: 0,
tick: {
visible: false,
},
},
mediaRules: [
{
maxWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '45%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '15%',
x: '50%',
y: '15%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '25%',
height: '20%',
x: '75%',
y: '0px',
},
{
minWidth: '1024px',
width: '25%',
height: '20%',
x: '75%',
y: '0px',
},
],
series: [
{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#76AA38',
legendText: 'Paid',
lineColor: '#76AA38',
},
{
values: [35, 42, 67, 89, 25, 34, 67, 85],
backgroundColor: '#50584C',
legendText: 'Free',
lineColor: '#50584C',
},
],
},
{
type: 'bar',
title: {
mediaRules: [
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '12px',
height: '13%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Top 3',
paddingLeft: '11%',
backgroundColor: '#007AFF',
fontColor: '#fff',
fontSize: '12px',
height: '9%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [
{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#007AFF',
height: '5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#007AFF',
fontSize: '9px',
height: '5%',
minWidth: '1024px',
},
],
},
plot: {
tooltip: {
offsetY: '-5px',
placement: 'node:top',
},
valueBox: {
text: '%t',
fontColor: '#fff',
placement: 'top-in',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [
{
margin: '20% 5% 20% 10%',
maxWidth: '399px',
},
{
margin: '15% 5% 20% 15%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '20% 3% 18% 8%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '20% 3% 18% 8%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
fontColor: '#333',
},
labels: ['September 2020'],
},
scaleY: {
guide: {
lineStyle: 'solid',
},
multiplier: true,
step: 2500,
},
mediaRules: [
{
maxWidth: '399px',
width: '100%',
height: '30%',
x: '0px',
y: '15%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '40%',
x: '0px',
y: '30%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '45%',
x: '0px',
y: '20%',
},
{
minWidth: '1024px',
width: '50%',
height: '45%',
x: '0px',
y: '20%',
},
],
series: [
{
text: 'iPhone<br>6',
values: [6845],
backgroundColor: '#007AFF',
},
{
text: 'iPhone<br>6s',
values: [8954],
backgroundColor: '#FF2D55',
},
{
text: 'iPhone<br>7',
values: [4251],
backgroundColor: '#5856D6',
},
],
},
{
type: 'bar',
title: {
mediaRules: [
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '12px',
height: '13%',
maxWidth: '399px',
textAlign: 'left',
},
{
text: 'Top 3',
paddingLeft: '11%',
backgroundColor: '#90C653',
fontColor: '#fff',
fontSize: '12px',
height: '9%',
maxWidth: '768px',
minWidth: '399px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
maxWidth: '1024px',
minWidth: '768px',
textAlign: 'center',
},
{
text: 'Top 3 Phone Models',
paddingLeft: '11%',
backgroundColor: 'none',
fontSize: '12px',
height: '8%',
minWidth: '1024px',
textAlign: 'left',
},
],
},
subtitle: {
mediaRules: [
{
maxWidth: '399px',
visible: false,
},
{
maxWidth: '768px',
minWidth: '399px',
visible: false,
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#90C653',
height: '5%',
maxWidth: '1024px',
minWidth: '768px',
},
{
text: ' ',
marginTop: '8%',
backgroundColor: '#90C653',
fontSize: '9px',
height: '5%',
minWidth: '1024px',
},
],
},
plot: {
tooltip: {
offsetY: '-5px',
placement: 'node:top',
},
valueBox: {
text: '%t',
fontColor: '#fff',
placement: 'top-in',
},
alpha: 0.9,
borderRadiusTopRight: '2px',
borderRadiusTopLeft: '2px',
},
plotarea: {
mediaRules: [
{
margin: '20% 5% 20% 10%',
maxWidth: '399px',
},
{
margin: '15% 5% 20% 15%',
maxWidth: '768px',
minWidth: '399px',
},
{
margin: '20% 3% 18% 8%',
maxWidth: '1024px',
minWidth: '768px',
},
{
margin: '20% 3% 18% 8%',
minWidth: '1024px',
},
],
},
scaleX: {
item: {
fontColor: '#333',
},
labels: ['September 2020'],
},
scaleY: {
guide: {
lineStyle: 'solid',
},
multiplier: true,
step: 1000,
},
mediaRules: [
{
maxWidth: '399px',
width: '100%',
height: '30%',
x: '0px',
y: '60%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '40%',
x: '50%',
y: '30%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '45%',
x: '50%',
y: '20%',
},
{
minWidth: '1024px',
width: '50%',
height: '45%',
x: '50%',
y: '20%',
},
],
series: [
{
text: 'Galaxy<br>Note 20',
values: [3425],
backgroundColor: '#76AA38',
},
{
text: 'Galaxy<br>S20',
values: [2921],
backgroundColor: '#50584C',
},
{
text: 'Galaxy<br>S10',
values: [2745],
backgroundColor: '#FFC208',
},
],
},
{
type: 'null',
title: {
mediaRules: [
{
text: 'Limited Mobile View',
backgroundColor: '#ccc',
fontColor: '#333',
maxWidth: '399px',
},
{
text: '',
fontColor: 'none',
minWidth: '399px',
},
{
text: '',
fontColor: 'none',
maxWidth: '1024px',
minWidth: '768px',
},
{
text: '',
fontColor: 'none',
minWidth: '1024px',
},
],
},
mediaRules: [
{
maxWidth: '399px',
width: '100%',
height: '10%',
x: '0px',
y: '90%',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '0px',
height: '0px',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '0px',
height: '0px',
},
{
minWidth: '1024px',
width: '0px',
height: '0px',
},
],
},
{
type: 'gauge',
backgroundColor: '#007AFF',
plot: {
borderWidth: '0px',
csize: '6px',
},
scale: {
sizeFactor: 1.1,
},
scaleR: {
center: {
backgroundColor: '#fff',
borderColor: '#007AFF',
size: '6px',
},
guide: {
lineColor: '#d8d6d6',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
offsetR: -3,
},
markers: [
{
type: 'area',
backgroundColor: '#FF2D55',
range: [0, 0],
},
],
ring: {
backgroundColor: '#FF2D55',
size: '4px',
},
step: 5,
tick: {
lineColor: '#333',
placement: 'out',
size: '5px',
},
},
mediaRules: [
{
maxWidth: '399px',
width: '0px',
height: '0px',
x: '-200px',
y: '-200px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '30%',
x: '0px',
y: '70%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '35%',
x: '0px',
y: '65%',
},
{
minWidth: '1024px',
width: '50%',
height: '35%',
x: '0px',
y: '65%',
},
],
series: [
{
text: 'iPhone X',
values: [6],
tooltip: {
backgroundColor: '#007AFF',
},
backgroundColor: '#007AFF',
},
{
text: 'iPhone 11',
values: [14],
tooltip: {
backgroundColor: '#FF2D55',
},
backgroundColor: '#FF2D55',
},
{
text: 'iPhone 11 Pro',
values: [21],
tooltip: {
backgroundColor: '#5856D6',
},
backgroundColor: '#5856D6',
},
],
},
{
type: 'gauge',
backgroundColor: '#92C163',
plot: {
borderWidth: '0px',
csize: '5px',
},
scale: {
sizeFactor: 1.1,
},
scaleR: {
center: {
backgroundColor: '#fff',
borderColor: '#84B34C',
size: '6px',
},
guide: {
lineColor: '#d8d6d6',
lineStyle: 'solid',
lineWidth: '1px',
},
item: {
fontColor: '#fff',
offsetR: -3,
},
markers: [
{
type: 'area',
alpha: 0.9,
backgroundColor: '#50584C',
range: [0, 0],
},
],
ring: {
backgroundColor: '#50584C',
size: '4px',
},
step: 5,
tick: {
lineColor: '#333',
placement: 'out',
size: '5px',
},
},
mediaRules: [
{
maxWidth: '399px',
width: '0px',
height: '0px',
x: '-200px',
y: '-200px',
},
{
maxWidth: '768px',
minWidth: '399px',
width: '50%',
height: '30%',
x: '50%',
y: '70%',
},
{
maxWidth: '1024px',
minWidth: '768px',
width: '50%',
height: '35%',
x: '50%',
y: '65%',
},
{
minWidth: '1024px',
width: '50%',
height: '35%',
x: '50%',
y: '65%',
},
],
series: [
{
values: [10],
tooltip: {
backgroundColor: '#84B34C',
},
backgroundColor: '#84B34C',
},
{
values: [15],
tooltip: {
backgroundColor: '#50584C',
},
backgroundColor: '#50584C',
},
{
values: [17],
tooltip: {
backgroundColor: '#FFC208',
},
backgroundColor: '#FFC208',
},
],
},
],
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
