<!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;
}
img.zc-img {
max-width: initial;
}
</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
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
backgroundColor: '#F8F8F8',
title: {
text: 'Median Family Wealth For Those Born 1948-56 by Race',
align: 'left',
fontColor: '#231F20',
fontSize: '16px',
paddingLeft: '30px',
},
plot: {
tooltip: {
text: '$%node-value',
thousandsSeparator: ',',
},
animation: {
effect: 'ANIMATION_FADE_IN',
method: 'ANIMATION_LINEAR',
speed: 100,
sequence: 'ANIMATION_BY_PLOT_AND_NODE',
},
dataBar: [
'7xmore',
'33x',
'3x',
'3x',
'8x',
'4x',
'8x',
'3x',
'8x',
'7x',
'7x',
],
thousandsSeparator: ',',
},
plotarea: {
marginLeft: '75px',
},
scaleX: {
minValue: 30,
maxValue: 80,
step: 5,
item: {
fontColor: '#7F8386',
textAlign: 'center',
},
lineColor: '#231F20',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 500000,
format: '$%scale-value',
step: 100000,
item: {
fontColor: '#7F8386',
textAlign: 'center',
},
lineWidth: '0px',
thousandsSeparator: ',',
tick: {
visible: false,
},
},
source: {
text: 'Source: Urban Institute calculations from Survey of Consumer Finances 1988-2021.<br />Notes: 2021 dollars. Hispanic sample size too small to show. Age is defined as the age of the household head. In 2021, these people were ages 65-73.',
fontColor: '#231F20',
fontSize: '11px',
marginBottom: '5px',
textAlign: 'left',
},
series: [{
type: 'line',
values: [
13875, 10000, 40000, 60000, 30000, 70000, 55000, 130000, 42000, 48000,
46890,
],
valueBox: [{
type: 'first',
text: '$%node-value',
fontColor: '#7F8386',
fontSize: '10px',
fontWeight: 'normal',
placement: 'left',
},
{
type: 'last',
text: '$%node-value',
fontColor: '#7F8386',
fontSize: '10px',
fontWeight: 'normal',
placement: 'right',
},
],
lineColor: '#EB008B',
lineWidth: '3px',
marker: {
borderWidth: '1px',
borderColor: '#EB008B',
backgroundColor: '#FFF',
type: 'circle',
},
},
{
type: 'line',
values: [
101317, 170000, 130000, 185000, 220000, 290000, 420000, 370000, 330000,
350000, 317510,
],
valueBox: {
fontWeight: 'normal',
text: '$%node-value',
fontColor: '#7F8386',
fontSize: '10px',
rules: [{
rule: '%node-index === 0',
visible: true,
offsetY: '-12px',
placement: 'left',
},
{
rule: '%node-index === 10',
visible: true,
placement: 'right',
},
{
rule: '%node-index >0 && %node-index < 10',
visible: false,
},
],
},
lineColor: '#0195D5',
lineWidth: '3px',
marker: {
type: 'circle',
borderWidth: '1px',
borderColor: '#0195D5',
backgroundColor: '#FFF',
},
},
{
type: 'bar',
values: [
90000, 160000, 90000, 130000, 195000, 220000, 370000, 240000, 290000,
300000, 270000,
],
offsetValues: [
13875, 10000, 40000, 60000, 30000, 70000, 55000, 130000, 42000, 48000,
46890,
],
valueBox: {
shadow: false,
text: '%data-bar',
backgroundColor: '#000',
padding: '5px',
placement: 'middle',
fontColor: '#FFF',
fontSize: '10px',
fontWeight: 'normal',
},
backgroundColor: '#211F20',
barWidth: '2px',
hoverState: {
visible: false,
},
tooltip: {
visible: false,
},
},
],
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
width: '100%',
height: '560px',
});
</script>
</body>
</html>
// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
let chartId = 'myChart';
// CHART CONFIG
// -----------------------------
let chartConfig = {
type: 'mixed',
backgroundColor: '#F8F8F8',
title: {
text: 'Median Family Wealth For Those Born 1948-56 by Race',
align: 'left',
fontColor: '#231F20',
fontSize: '16px',
paddingLeft: '30px',
},
plot: {
tooltip: {
text: '$%node-value',
thousandsSeparator: ',',
},
animation: {
effect: 'ANIMATION_FADE_IN',
method: 'ANIMATION_LINEAR',
speed: 100,
sequence: 'ANIMATION_BY_PLOT_AND_NODE',
},
dataBar: [
'7xmore',
'33x',
'3x',
'3x',
'8x',
'4x',
'8x',
'3x',
'8x',
'7x',
'7x',
],
thousandsSeparator: ',',
},
plotarea: {
marginLeft: '75px',
},
scaleX: {
minValue: 30,
maxValue: 80,
step: 5,
item: {
fontColor: '#7F8386',
textAlign: 'center',
},
lineColor: '#231F20',
lineWidth: '1px',
tick: {
visible: false,
},
},
scaleY: {
minValue: 0,
maxValue: 500000,
format: '$%scale-value',
step: 100000,
item: {
fontColor: '#7F8386',
textAlign: 'center',
},
lineWidth: '0px',
thousandsSeparator: ',',
tick: {
visible: false,
},
},
source: {
text: 'Source: Urban Institute calculations from Survey of Consumer Finances 1988-2021.<br />Notes: 2021 dollars. Hispanic sample size too small to show. Age is defined as the age of the household head. In 2021, these people were ages 65-73.',
fontColor: '#231F20',
fontSize: '11px',
marginBottom: '5px',
textAlign: 'left',
},
series: [
{
type: 'line',
values: [
13875, 10000, 40000, 60000, 30000, 70000, 55000, 130000, 42000, 48000,
46890,
],
valueBox: [
{
type: 'first',
text: '$%node-value',
fontColor: '#7F8386',
fontSize: '10px',
fontWeight: 'normal',
placement: 'left',
},
{
type: 'last',
text: '$%node-value',
fontColor: '#7F8386',
fontSize: '10px',
fontWeight: 'normal',
placement: 'right',
},
],
lineColor: '#EB008B',
lineWidth: '3px',
marker: {
borderWidth: '1px',
borderColor: '#EB008B',
backgroundColor: '#FFF',
type: 'circle',
},
},
{
type: 'line',
values: [
101317, 170000, 130000, 185000, 220000, 290000, 420000, 370000, 330000,
350000, 317510,
],
valueBox: {
fontWeight: 'normal',
text: '$%node-value',
fontColor: '#7F8386',
fontSize: '10px',
rules: [
{
rule: '%node-index === 0',
visible: true,
offsetY: '-12px',
placement: 'left',
},
{
rule: '%node-index === 10',
visible: true,
placement: 'right',
},
{
rule: '%node-index >0 && %node-index < 10',
visible: false,
},
],
},
lineColor: '#0195D5',
lineWidth: '3px',
marker: {
type: 'circle',
borderWidth: '1px',
borderColor: '#0195D5',
backgroundColor: '#FFF',
},
},
{
type: 'bar',
values: [
90000, 160000, 90000, 130000, 195000, 220000, 370000, 240000, 290000,
300000, 270000,
],
offsetValues: [
13875, 10000, 40000, 60000, 30000, 70000, 55000, 130000, 42000, 48000,
46890,
],
valueBox: {
shadow: false,
text: '%data-bar',
backgroundColor: '#000',
padding: '5px',
placement: 'middle',
fontColor: '#FFF',
fontSize: '10px',
fontWeight: 'normal',
},
backgroundColor: '#211F20',
barWidth: '2px',
hoverState: {
visible: false,
},
tooltip: {
visible: false,
},
},
],
};
// RENDER CHART
// -----------------------------
zingchart.render({
id: chartId,
data: chartConfig,
width: '100%',
height: '560px',
});
