<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'pie',
title: {
text: 'MSCI considering a further increase to China A-shares in the MSCI Global Investable Market indexes',
fontSize: '15px'
},
plot: {
detach: false,
animation: {
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 300
},
valueBox: {
text: '%node-value%',
fontSize: '11px',
fontWeight: 'bold',
offsetR: '15px',
placement: 'in',
rules: [{
rule: '%node-value < 4',
color: '#333',
offsetR: '-10px',
placement: 'out'
}]
}
},
plotarea: {
margin: '50px 10px 30px 10px'
},
scale: {
decimals: 3,
cursor: 'pointer',
values: [
'Current<br>MSCI EM 5% A-share<br>LC Inclusion',
'August 2021<br>MSCI EM 20% A-share<br>LC Inclusion',
'May 2022<br>MSCI EM 20% A-share<br>LC+MC Inclusion'
],
maxTicks: 2,
item: {
fontWeight: 'bold',
fontSize: '13px',
placement: 'top',
mediaRules: [{
maxWidth: 400,
color: 'red'
}]
},
layout: '1x3',
sizeFactor: 0.8,
},
legend: {
borderWidth: 0,
layout: 'float',
margin: 'auto auto 25px auto',
toggleAction: 'remove',
item: {
paddingLeft: '-5px',
fontSize: '13px',
fontWeight: 'bold'
},
marker: {
size: '4px'
},
},
tooltip: {
text: '%plot-text: %node-value%',
fontSize: '17px'
},
source: {
text: 'Source: https://www.marquetteassociates.com/research/a-shining-light-for-china/',
align: 'left',
target: '_blank',
url: 'https://www.marquetteassociates.com/research/a-shining-light-for-china/'
},
series: [{
values: [30.6, 29.1, 28.9],
text: 'China',
backgroundColor: '#5C7CB5'
},
{
values: [0.7, 2.8, 3.4],
text: 'A Shares',
backgroundColor: '#D79024'
},
{
values: [14.8, 14.0, 13.9],
text: 'Korea',
backgroundColor: '#BCC342'
},
{
values: [12.2, 11.6, 11.5],
text: 'Taiwan',
backgroundColor: '#74667F'
},
{
values: [9.3, 8.8, 8.8],
text: 'India',
backgroundColor: '#92B5C8'
},
{
values: [6.2, 5.9, 5.8],
text: 'South Africa',
backgroundColor: '#BBB1BA'
},
{
values: [5.8, 5.5, 5.4],
text: 'Brazil',
backgroundColor: '#AFA492'
},
{
values: [20.4, 22.3, 22.4],
text: 'Others',
backgroundColor: '#494C55'
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
width: '100%',
height: '540px',
output: 'svg'
});
</script>
</body>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body class="zc-body">
<div id="myChart">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
</body>
.zc-ref {
display: none;
}
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location(s)
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'pie',
title: {
text: 'MSCI considering a further increase to China A-shares in the MSCI Global Investable Market indexes',
fontSize: '15px'
},
plot: {
detach: false,
animation: {
effect: 'ANIMATION_EXPAND_TOP',
method: 'ANIMATION_LINEAR',
sequence: 'ANIMATION_NO_SEQUENCE',
speed: 300
},
valueBox: {
text: '%node-value%',
fontSize: '11px',
fontWeight: 'bold',
offsetR: '15px',
placement: 'in',
rules: [{
rule: '%node-value < 4',
color: '#333',
offsetR: '-10px',
placement: 'out'
}]
}
},
plotarea: {
margin: '50px 10px 30px 10px'
},
scale: {
decimals: 3,
cursor: 'pointer',
values: [
'Current<br>MSCI EM 5% A-share<br>LC Inclusion',
'August 2021<br>MSCI EM 20% A-share<br>LC Inclusion',
'May 2022<br>MSCI EM 20% A-share<br>LC+MC Inclusion'
],
maxTicks: 2,
item: {
fontWeight: 'bold',
fontSize: '13px',
placement: 'top',
mediaRules: [{
maxWidth: 400,
color: 'red'
}]
},
layout: '1x3',
sizeFactor: 0.8,
},
legend: {
borderWidth: 0,
layout: 'float',
margin: 'auto auto 25px auto',
toggleAction: 'remove',
item: {
paddingLeft: '-5px',
fontSize: '13px',
fontWeight: 'bold'
},
marker: {
size: '4px'
},
},
tooltip: {
text: '%plot-text: %node-value%',
fontSize: '17px'
},
source: {
text: 'Source: https://www.marquetteassociates.com/research/a-shining-light-for-china/',
align: 'left',
target: '_blank',
url: 'https://www.marquetteassociates.com/research/a-shining-light-for-china/'
},
series: [{
values: [30.6, 29.1, 28.9],
text: 'China',
backgroundColor: '#5C7CB5'
},
{
values: [0.7, 2.8, 3.4],
text: 'A Shares',
backgroundColor: '#D79024'
},
{
values: [14.8, 14.0, 13.9],
text: 'Korea',
backgroundColor: '#BCC342'
},
{
values: [12.2, 11.6, 11.5],
text: 'Taiwan',
backgroundColor: '#74667F'
},
{
values: [9.3, 8.8, 8.8],
text: 'India',
backgroundColor: '#92B5C8'
},
{
values: [6.2, 5.9, 5.8],
text: 'South Africa',
backgroundColor: '#BBB1BA'
},
{
values: [5.8, 5.5, 5.4],
text: 'Brazil',
backgroundColor: '#AFA492'
},
{
values: [20.4, 22.3, 22.4],
text: 'Others',
backgroundColor: '#494C55'
}
]
};
// RENDER CHARTS
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
width: '100%',
height: '540px',
output: 'svg'
});