{ const chartContainer = document.createElement("div"); chartContainer.classList.add('chart') const chart = chrt.Chrt() .node(chartContainer) .size(600,400) .margins({ left: 30, right: 30, top: 20, bottom: 70, }) .padding({ left: 20, right: 20, }) .x([1929,1949]) .add( chrt.yAxis(5) ) .add( chrt.chrtColumns() .data(data, d => ({x: +d.year, y: +d.change})) .fill(d => d.y > 0 ? 'url(#stripes)' : 'url(#dots)') .strokeWidth(2) .width(0.8) .add(chrt.chrtLabel('*').left(1933).top(-2).offset(-10,13)) ) .add( chrt.xAxis(21) .setTickPosition('inside') .setTickLength(0) .format((d,i) => !i ? d : `'${+d - 1900}`) .showAxis(true) .width(2) ) .add( chrt.xAxis() .hideTicks() .showAxis(true) .zero(0) .width(2) ) .add( chrt.xAxis() .orient('top') .hideTicks() .width(2) ) .add( chrt.yAxis(10) .orient('right') .setTickPosition('inside') .width(2) .format(d => d > 0 ? `+${d}` : d) .add( chrt.chrtAxisTitle('Billions of Dollars') .class('index-title') .align('right') .valign('top') .offset({y: -10,x: -95})) ) .add( chrt.yAxis(10) .orient('left') .setTickPosition('inside') .width(2) .format(d => d > 0 ? `+${d}` : d) .add( chrt.chrtAxisTitle('Billions of Dollars') .class('index-title') .align('right') .valign('top') .offset({y: -10,x: -30})) ) .add(chrt.chrtAnnotation('* Estimated').class('small-note').left(1948).top(-3).offset(10,50)) .add(chrt.chrtAnnotation('Source: U.S. Departmente of Commerce').class('small-note').left(1929).top(-3).offset(-50,50)) const defs = document.createElementNS("http://www.w3.org/2000/svg", 'defs'); defs.innerHTML = ` `; chart.node().querySelector('svg').prepend(defs); return chart.node(); }