2f:T120c,viewof dataStr = Inputs.textarea({ rows: 100, value: JSON.stringify( { title: "Chart title", unit: "%", yMin: 0, yMax: 100, grouped: false, rightYMin: 0, rightYMax: 1000, rightUnit: "", legends: [ [ { type: "line", color: "red", label: "Description of red line" }, { type: "line", color: "gray", dashed: true, label: "Description of dashed gray line" } ], [ { type: "rect", color: "red", label: "Description of red rect" }, { type: "rect", color: "blue", label: "Description of blue rect" } ] ], rotateX: 10, lines: [ { color: "red", axis: "right", values: [ { name: 2018, value: 40 }, { name: 2019, value: 50 }, { name: 2020, value: 10 }, { name: 2021, value: 90 } ] }, { dashed: true, values: [ { name: 2018, value: 50 }, { name: 2019, value: 80 } ] } ], groups: [ { name: 2018, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 1, color: "#ACD3F1" }, { name: "Initial response", value: 18, color: "#1786D7" }, { name: "Partial response", value: 1, color: "#126AAA" }, { name: "Full response", value: 1, color: "#0D4E7C" } ] }, { name: 2019, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 1, color: "#126AAA" }, { name: "Full response", value: 3, color: "#0D4E7C" } ] }, { name: 2020, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 1, color: "#126AAA" }, { name: "Full response", value: 33, color: "#0D4E7C" } ] }, { name: 2021, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 41, color: "#126AAA" }, { name: "Full response", value: 3, color: "#0D4E7C" } ] }, { name: 2022, values: [ { name: "No Action", value: 0, color: "white" }, { name: "Planned response", value: 5, color: "#ACD3F1" }, { name: "Initial response", value: 22, color: "#1786D7" }, { name: "Partial response", value: 51, color: "#126AAA" }, { name: "Full response", value: 3, color: "#0D4E7C" } ] } ] }, null, " " ) })30:T434,function generateLegendsHtml(legendsData) { if (!legendsData) return ``; return `

${legendsData .map( (legends) => `

${legends .map( (legend) => `

${ (legend.type == "line" && `

`) || "" } ${ (legend.type == "rect" && `

`) || "" }

${legend.label}

` ) .join("")}

`; }31:T387d,class StackedBarChart { constructor() { // Defining state attributes const attrs = { id: "ID" + Math.floor(Math.random() * 1000000), svgWidth: 400, svgHeight: 350, marginTop: 15, marginBottom: 55, marginRight: 75, marginLeft: 75, grouped: true, colors: { neutral10: "#EBEBEB" }, container: "body", defaultTextFill: "#2C3E50", defaultFont: "Open Sans", data: null, chartWidth: null, chartHeight: null, duration: 400 }; // Defining accessors this.getState = () => attrs; this.setState = (d) => Object.assign(attrs, d); // Automatically generate getter and setters for chart object based on the state properties; Object.keys(attrs).forEach((key) => { //@ts-ignore this[key] = function (_) { if (!arguments.length) { return attrs[key]; } attrs[key] = _; return this; }; }); // Custom enter exit update pattern initialization (prototype method) this.initializeEnterExitUpdatePattern(); } render() { const state = this.getState(); state.grouped = state.data.grouped; console.log("bar chart data", state.data); this.setDynamicContainer(); this.calculateProperties(); this.drawSvgAndWrappers(); this.drawRects(); state.firstRender = false; return this; } calculateProperties() { const { data, marginLeft, marginTop, marginRight, marginBottom, svgWidth, svgHeight } = this.getState(); //Calculated properties var calc = { chartTopMargin: null, chartLeftMargin: null, chartWidth: null, chartHeight: null }; calc.chartLeftMargin = marginLeft; calc.chartTopMargin = data.title ? 40 : marginTop; const chartWidth = svgWidth - marginRight - calc.chartLeftMargin; const chartHeight = svgHeight - marginBottom - calc.chartTopMargin; this.setState({ calc, chartWidth, chartHeight }); } drawRects() { const { chart, svg, colors, grouped, duration, data, chartWidth, chartHeight } = this.getState(); if (data.title) { const title = svg ._addOld({ tag: "g", className: "chart-title-group" }) .attr("transform", `translate(${40},${10})`); title ._addOld({ tag: "text", className: "chart-title-text" }) .text(data.title); } const barCount = data.groups[0].values.length; const numberOfBars = Object.keys(data.groups[0]).filter((key) => key.startsWith("values") ).length; data.groups.forEach((group) => { for (let i = 1; i <= numberOfBars; i++) { let val = 0; group[`values${i === 1 ? "" : i}`].forEach((valueObj) => { valueObj.cumsum = val; val += valueObj.value; }); } }); // Y Axis const scaleY = d3 .scaleLinear() .domain([data.yMin, data.yMax]) .range([chartHeight, 0]); const yAxis = d3 .axisLeft(scaleY) .tickFormat((d) => data.skipUnit ? d3.format(",")(d) : d3.format(".2s")(d) + (data.skipUnit ? "" : data.unit) ) .ticks(5) .tickSize(-chartWidth); const yAxisWrapper = chart._addOld({ tag: "g", className: "y-axis-group" }); yAxisWrapper.transition().duration(duration).call(yAxis); yAxisWrapper.selectAll(".domain").remove(); yAxisWrapper .selectAll("text") .attr("font-size", 14) .attr("font-weight", 300); //.attr("x", -10); yAxisWrapper.selectAll(".tick line").attr("stroke", colors.neutral10); // Right Y axis const scaleRightY = d3 .scaleLinear() .domain([data.rightYMin, data.rightYMax]) .range([chartHeight, 0]); const yAxisRight = d3 .axisRight(scaleRightY) .tickFormat((d) => { const format = d < 0 ? d3.format(".2s") : (d) => d; return format(d) + data.rightUnit; }) .ticks(5) .tickSize(10); const yAxisRightWrapper = chart ._addOld({ tag: "g", className: "y-axis-right-group" }) .attr("transform", `translate(${chartWidth})`); yAxisRightWrapper.transition().duration(duration).call(yAxisRight); yAxisRightWrapper.selectAll(".domain").remove(); yAxisRightWrapper .selectAll("text") .attr("font-size", 14) .attr("font-weight", 300) .attr("x", -10); yAxisRightWrapper.selectAll(".tick line").attr("stroke", colors.neutral10); if (data.skipUnit) { yAxisWrapper ._addOld({ tag: "text", className: "unit-text" }) .text(data.unit) .attr("fill", "black") .attr("font-size", 14) .attr("font-weight", 300) .attr("x", 0) .attr("y", -20); } // X Axis const margin = 20; const lineNames = (data.lines || []) .map((d) => d.values) .flat() .map((d) => d.name + "") .sort(); const barNames = data.groups.map((d) => d.name + ""); const uniqNames = Array.from(new Set(lineNames.concat(barNames))); const scaleX = d3 .scaleBand() .domain(uniqNames) .range([0 + margin, chartWidth - margin]) .paddingInner(grouped ? 0.2 : 0.5); const xAxis = d3.axisBottom(scaleX); const xAxisWrapper = chart ._addOld({ tag: "g", className: "x-axis-group" }) .style("opacity", 0) .attr("transform", `translate(0,${chartHeight})`); const xFoWrapper = chart ._addOld({ tag: "g", className: "x-fo-group" }) .attr("transform", `translate(0,${chartHeight})`); xAxisWrapper.call(xAxis); xAxisWrapper.selectAll(".tick line").remove(); xAxisWrapper.selectAll(".domain").remove(); xAxisWrapper .selectAll("text") .attr("font-size", 14) .attr("font-weight", 300) .attr("text-anchor", data.textAnchor || "middle"); xFoWrapper ._addOld({ tag: "foreignObject", className: "fo-x", data: scaleX.domain() }) .attr("width", scaleX.bandwidth() * 2) .attr("height", 100) .attr("transform", function (d) { return `translate(${scaleX(d)},10)`; }) ._addOld({ tag: "xhtml:div", className: "fo-div-x", data: (d) => [d] }) .style("font-size", 12 + "px") .style("font-weight", 300) .style("line-height", "100%") .style("width", scaleX.bandwidth() * 1.2 + "px") .style("height", "100px") .html((d) => d); xAxisWrapper ._addOld({ tag: "line", className: "horizontal-line" }) .attr("x1", 0) .attr("x2", chartWidth) .attr("y0", 0) .attr("y1", 0) .attr("stroke", "black") .attr("stroke-width", 0.5); // Background-rects const barWrappers = chart ._addOld({ tag: "g", className: "bar-wrappers", data: data.groups }) .attr("transform", (d) => `translate(${scaleX(d.name + "")},0)`); const barBackground = barWrappers ._addOld({ tag: "path", className: "bar-background" }) .attr("fill", "rgba(255,255,255,0.5)") .attr("d", (d) => { let margin = 4; if (data.isIndirect) margin = 10; const width = scaleX.bandwidth() + margin; const height = chartHeight - 1; const roundness = width / 8; return `M0 ${height} V${roundness} Q0 0 ${roundness} 0 H${width - roundness} Q${width} 0 ${width} ${roundness} V${height}z`; }); for (let i = 1; i <= numberOfBars; i++) { let barWidth = scaleX.bandwidth(); let offsetX = 0; const barMargin = 3; if (grouped) { barWidth = scaleX.bandwidth() / barCount - barMargin; offsetX = (i - 1) * (barWidth + barMargin); } else { if (numberOfBars > 1) { barWidth = (barWidth / numberOfBars) * (1 - (numberOfBars - 1) * 0.05); } offsetX = (scaleX.bandwidth() / numberOfBars) * (i - 1) + scaleX.bandwidth() * 0.05 * (i - 1); } const eachBar = barWrappers ._addOld({ tag: "path", className: `bars-${i}`, data: (d) => { const localData = d[`values${i === 1 ? "" : i}`]; localData.forEach((d) => (d.id = d.name)); return localData; } }) .attr("fill", (d) => d.color) .attr("stroke", () => (data.hasStroke ? "white" : "")) .attr("stroke-width", () => (data.hasStroke ? 1 : 0)) .on("mouseenter", function (e, d) { d3.select(this).attr("fill", "black"); }) .on("mouseleave", function (e, d) { d3.select(this).attr("fill", d.color); }); eachBar.each(function (d, i, arr) { if (this._tippy) this._tippy.destroy(); this._tippy = tippy(this, { allowHTML: true, content: `

${d.name}
${d.value.toLocaleString()} ${ data.unit ? data.unit : "" }

` }); }); eachBar .transition() .duration(duration) .attr("d", (d, i, arr) => { const height = scaleY(0) - scaleY(d.value); const y = chartHeight - scaleY(d.cumsum); let roundness = 0; if (height < roundness) { roundness = height; } let startY = chartHeight - y + roundness; let roundnessDiff = 0; if (startY > chartHeight) { roundnessDiff = startY - chartHeight; startY = chartHeight; } let endY = startY - height - roundnessDiff - roundness; if (grouped) { let gStartX = i * (barWidth + barMargin); let gStartY = chartHeight; let gBarHeight = chartHeight - scaleY(d.value); return `M ${gStartX}, ${gStartY} v -${gBarHeight} h ${barWidth} v ${gBarHeight}, z`; } else { return `M ${offsetX} ${startY} V${endY + roundness} Q${offsetX} ${endY} ${ offsetX + roundness } ${endY} H${offsetX + barWidth - roundness} Q${offsetX + barWidth} ${endY} ${ offsetX + barWidth } ${endY + roundness} V${startY}z`; } }) .each(function () { d3.select(this).lower(); }); } barBackground.lower(); /* LINE CHART */ const lineLayout = d3 .line() .x((d) => scaleX(d.name + "") + scaleX.bandwidth() / 2) .y((d) => (d.axis == "right" ? scaleRightY(d.value) : scaleY(d.value))); const lineData = data.lines || []; lineData.forEach((line) => { line.values.forEach((v) => { v.axis = line.axis; }); }); const linesWrap = chart._addOld({ tag: "g", className: "lines-wrap" }); linesWrap ._addOld({ tag: "path", className: "line-items", data: lineData }) .attr("d", (d) => { return lineLayout(d.values); }) .attr("stroke-dasharray", (d) => (d.dashed ? "5,5" : "")) .attr("fill", "none") .attr("stroke-width", "3px") .attr("stroke", (d) => d.color || "gray"); } drawSvgAndWrappers() { const { d3Container, svgWidth, svgHeight, defaultFont, calc, data, chartWidth, chartHeight } = this.getState(); // Draw SVG const svg = d3Container ._addOld({ tag: "svg", className: "svg-chart-container" }) .style("overflow", "visible") .attr("width", svgWidth) .attr("height", svgHeight) .attr("font-family", defaultFont); //Add container g element var chart = svg ._addOld({ tag: "g", className: "chart" }) .attr( "transform", "translate(" + calc.chartLeftMargin + "," + calc.chartTopMargin + ")" ); this.setState({ chart, svg }); } initializeEnterExitUpdatePattern() { d3.selection.prototype._addOld = function (params) { var container = this; var className = params.className; var elementTag = params.tag; var data = params.data || [className]; var exitTransition = params.exitTransition || null; var enterTransition = params.enterTransition || null; // Pattern in action var selection = container .selectAll("." + className) .data(data, (d, i) => { if (typeof d === "object") { if (d.id) { return d.id; } } return i; }); if (exitTransition) { exitTransition(selection); } else { selection.exit().remove(); } const enterSelection = selection.enter().append(elementTag); if (enterTransition) { enterTransition(enterSelection); } selection = enterSelection.merge(selection); selection.attr("class", className); return selection; }; } setDynamicContainer() { const attrs = this.getState(); //Drawing containers var d3Container = d3.select(attrs.container); var containerRect = d3Container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; let resize = () => { var containerRect = d3Container.node().getBoundingClientRect(); if (containerRect.width > 0) attrs.svgWidth = containerRect.width; this.render(); }; d3.select(window).on("resize." + attrs.id, () => { resize(); }); if (!attrs.resized && attrs.data) { setTimeout(() => { resize(); }, 500); } if (attrs.data) { attrs.resized = true; } this.setState({ d3Container }); } }32:T348c,groupedStackedDataSample = ({ hasStroke: true, skipUnit: true, color: "red", unit: " USDm", yMin: 0, grouped: false, pieLabel: null, yMax: 33369.40000000001, isIndirect: false, lines: [], groups: [ { name: "2019", values: [ { name: "Biofuel/Biomass", unit: " USDm", value: 1271.79, color: "#8EA086", cumsum: 0 }, { name: "Hydropower", unit: " USDm", value: 1014.1, color: "#8EA086", cumsum: 1271.79 }, { name: "Solar", unit: " USDm", value: 7412, color: "#8EA086", cumsum: 2285.89 }, { name: "Wind", unit: " USDm", value: 13288.12, color: "#8EA086", cumsum: 9697.89 }, { name: "Waste-to-Energy", unit: " USDm", value: 1259.22, color: "#8EA086", cumsum: 22986.010000000002 }, { name: "Power Grids", unit: " USDm", value: 592.94, color: "#8EA086", cumsum: 24245.230000000003 }, { name: "Nuclear", unit: " USDm", value: 22.78, color: "#8EA086", cumsum: 24838.170000000002 }, { name: "Carbon Capture & Storage", unit: " USDm", value: 22.78, color: "#8EA086", cumsum: 24860.95 }, { name: "Energy Storage", unit: " USDm", value: 418.16, color: "#8EA086", cumsum: 24883.73 }, { name: "Other Renewable Energy", unit: " USDm", value: 674.66, color: "#8EA086", cumsum: 25301.89 } ], values2: [ { name: "Oil and Gas Supply Chain", unit: " USDm", value: 10188.1, color: "#B02F2E", cumsum: 0 }, { name: "Coal Mining", unit: " USDm", value: 105.4, color: "#B02F2E", cumsum: 10188.1 }, { name: "Oil-Fired", unit: " USDm", value: 56.1, color: "#B02F2E", cumsum: 10293.5 }, { name: "Gas-Fired", unit: " USDm", value: 7942.9, color: "#B02F2E", cumsum: 10349.6 }, { name: "Coal-Fired", unit: " USDm", value: 1015.5, color: "#B02F2E", cumsum: 18292.5 }, { name: "Other Fossil Fuel", unit: " USDm", value: 4973.5, color: "#B02F2E", cumsum: 19308 } ] }, { name: "2020", values: [ { name: "Biofuel/Biomass", unit: " USDm", value: 866.39, color: "#8EA086", cumsum: 0 }, { name: "Hydropower", unit: " USDm", value: 541.4, color: "#8EA086", cumsum: 866.39 }, { name: "Solar", unit: " USDm", value: 10335.71, color: "#8EA086", cumsum: 1407.79 }, { name: "Wind", unit: " USDm", value: 13537.42, color: "#8EA086", cumsum: 11743.5 }, { name: "Waste-to-Energy", unit: " USDm", value: 635.89, color: "#8EA086", cumsum: 25280.92 }, { name: "Power Grids", unit: " USDm", value: 768.74, color: "#8EA086", cumsum: 25916.809999999998 }, { name: "Nuclear", unit: " USDm", value: 33.2, color: "#8EA086", cumsum: 26685.55 }, { name: "Carbon Capture & Storage", unit: " USDm", value: 105.08, color: "#8EA086", cumsum: 26718.75 }, { name: "Energy Storage", unit: " USDm", value: 601.95, color: "#8EA086", cumsum: 26823.83 }, { name: "Other Renewable Energy", unit: " USDm", value: 868.11, color: "#8EA086", cumsum: 27425.780000000002 } ], values2: [ { name: "Oil and Gas Supply Chain", unit: " USDm", value: 16865.5, color: "#B02F2E", cumsum: 0 }, { name: "Coal Mining", unit: " USDm", value: 28.6, color: "#B02F2E", cumsum: 16865.5 }, { name: "Oil-Fired", unit: " USDm", value: 33.2, color: "#B02F2E", cumsum: 16894.1 }, { name: "Gas-Fired", unit: " USDm", value: 6391.3, color: "#B02F2E", cumsum: 16927.3 }, { name: "Coal-Fired", unit: " USDm", value: 1282.9, color: "#B02F2E", cumsum: 23318.6 }, { name: "Other Fossil Fuel", unit: " USDm", value: 7082.7, color: "#B02F2E", cumsum: 24601.5 } ] }, { name: "2021", values: [ { name: "Biofuel/Biomass", unit: " USDm", value: 1536.47, color: "#8EA086", cumsum: 0 }, { name: "Hydropower", unit: " USDm", value: 1249.16, color: "#8EA086", cumsum: 1536.47 }, { name: "Solar", unit: " USDm", value: 9043.43, color: "#8EA086", cumsum: 2785.63 }, { name: "Wind", unit: " USDm", value: 15139.45, color: "#8EA086", cumsum: 11829.060000000001 }, { name: "Waste-to-Energy", unit: " USDm", value: 1839.55, color: "#8EA086", cumsum: 26968.510000000002 }, { name: "Power Grids", unit: " USDm", value: 2097.47, color: "#8EA086", cumsum: 28808.06 }, { name: "Nuclear", unit: " USDm", value: 539.46, color: "#8EA086", cumsum: 30905.530000000002 }, { name: "Carbon Capture & Storage", unit: " USDm", value: 453.69, color: "#8EA086", cumsum: 31444.99 }, { name: "Energy Storage", unit: " USDm", value: 669.67, color: "#8EA086", cumsum: 31898.68 }, { name: "Other Renewable Energy", unit: " USDm", value: 411, color: "#8EA086", cumsum: 32568.35 } ], values2: [ { name: "Oil and Gas Supply Chain", unit: " USDm", value: 8150.7, color: "#B02F2E", cumsum: 0 }, { name: "Coal Mining", unit: " USDm", value: 0, color: "#B02F2E", cumsum: 8150.7 }, { name: "Oil-Fired", unit: " USDm", value: 414.5, color: "#B02F2E", cumsum: 8150.7 }, { name: "Gas-Fired", unit: " USDm", value: 6363.6, color: "#B02F2E", cumsum: 8565.2 }, { name: "Coal-Fired", unit: " USDm", value: 937.3, color: "#B02F2E", cumsum: 14928.800000000001 }, { name: "Other Fossil Fuel", unit: " USDm", value: 10459.9, color: "#B02F2E", cumsum: 15866.1 } ] }, { name: "2022", values: [ { name: "Biofuel/Biomass", unit: " USDm", value: 430.52, color: "#8EA086", cumsum: 0 }, { name: "Hydropower", unit: " USDm", value: 1475.23, color: "#8EA086", cumsum: 430.52 }, { name: "Solar", unit: " USDm", value: 9640.09, color: "#8EA086", cumsum: 1905.75 }, { name: "Wind", unit: " USDm", value: 8512.47, color: "#8EA086", cumsum: 11545.84 }, { name: "Waste-to-Energy", unit: " USDm", value: 556.26, color: "#8EA086", cumsum: 20058.309999999998 }, { name: "Power Grids", unit: " USDm", value: 8157.5, color: "#8EA086", cumsum: 20614.569999999996 }, { name: "Nuclear", unit: " USDm", value: 384.09, color: "#8EA086", cumsum: 28772.069999999996 }, { name: "Carbon Capture & Storage", unit: " USDm", value: 115.7, color: "#8EA086", cumsum: 29156.159999999996 }, { name: "Energy Storage", unit: " USDm", value: 1451.45, color: "#8EA086", cumsum: 29271.859999999997 }, { name: "Other Renewable Energy", unit: " USDm", value: 987.68, color: "#8EA086", cumsum: 30723.309999999998 } ], values2: [ { name: "Oil and Gas Supply Chain", unit: " USDm", value: 13020.8, color: "#B02F2E", cumsum: 0 }, { name: "Coal Mining", unit: " USDm", value: 0, color: "#B02F2E", cumsum: 13020.8 }, { name: "Oil-Fired", unit: " USDm", value: 0, color: "#B02F2E", cumsum: 13020.8 }, { name: "Gas-Fired", unit: " USDm", value: 8784.6, color: "#B02F2E", cumsum: 13020.8 }, { name: "Coal-Fired", unit: " USDm", value: 170.8, color: "#B02F2E", cumsum: 21805.4 }, { name: "Other Fossil Fuel", unit: " USDm", value: 9541.9, color: "#B02F2E", cumsum: 21976.2 } ] }, { name: "2023", values: [ { name: "Biofuel/Biomass", unit: " USDm", value: 1438.54, color: "#8EA086", cumsum: 0 }, { name: "Hydropower", unit: " USDm", value: 1698.98, color: "#8EA086", cumsum: 1438.54 }, { name: "Solar", unit: " USDm", value: 8815.28, color: "#8EA086", cumsum: 3137.52 }, { name: "Wind", unit: " USDm", value: 11024.49, color: "#8EA086", cumsum: 11952.800000000001 }, { name: "Waste-to-Energy", unit: " USDm", value: 367.45, color: "#8EA086", cumsum: 22977.29 }, { name: "Power Grids", unit: " USDm", value: 1592.45, color: "#8EA086", cumsum: 23344.74 }, { name: "Nuclear", unit: " USDm", value: 0, color: "#8EA086", cumsum: 24937.190000000002 }, { name: "Carbon Capture & Storage", unit: " USDm", value: 0, color: "#8EA086", cumsum: 24937.190000000002 }, { name: "Energy Storage", unit: " USDm", value: 4661.8, color: "#8EA086", cumsum: 24937.190000000002 }, { name: "Other Renewable Energy", unit: " USDm", value: 3301.71, color: "#8EA086", cumsum: 29598.99 } ], values2: [ { name: "Oil and Gas Supply Chain", unit: " USDm", value: 8711.4, color: "#B02F2E", cumsum: 0 }, { name: "Coal Mining", unit: " USDm", value: 0, color: "#B02F2E", cumsum: 8711.4 }, { name: "Oil-Fired", unit: " USDm", value: 60.2, color: "#B02F2E", cumsum: 8711.4 }, { name: "Gas-Fired", unit: " USDm", value: 13797.2, color: "#B02F2E", cumsum: 8771.6 }, { name: "Coal-Fired", unit: " USDm", value: 436.4, color: "#B02F2E", cumsum: 22568.800000000003 }, { name: "Other Fossil Fuel", unit: " USDm", value: 10364.2, color: "#B02F2E", cumsum: 23005.200000000004 } ] } ], rightYMin: 0, rightUnit: "" })33:[] 2d:{"title":"Simple stacked bar chart","cells":[{"id":0,"value":"# Simple stacked bar chart","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"data = JSON.parse(dataStr)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"chart = {\n const legendsHtml = generateLegendsHtml(\n JSON.parse(JSON.stringify(data)).legends\n );\n const container = html`

\n\n${legendsHtml || \"\"}\n

`;\n yield container;\n return new StackedBarChart()\n .container(container)\n .svgHeight(400)\n .data(JSON.parse(JSON.stringify(data)))\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"tippy = require(\"tippy.js@6.3.7\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}