<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
#container {
max-width: 800px;
margin: 0 auto
}
Highcharts.chart("container", {
title: {
text: "Estimated US Energy Consumption in 2017"
},
subtitle: {
text:
"Source: <a href='https://www.llnl.gov/'> Lawrence Livermore National Laboratory</a>"
},
tooltip: {
headerFormat:null,
pointFormat:
"{point.fromNode.name} \u2192 {point.toNode.name}: {point.weight:.2f} quads",
nodeFormat: "{point.name}: {point.sum:.2f} quads"
},
series: [
{
borderColor: "#1a1a1a",
borderWidth: 1,
keys: ["from", "to", "weight"],
nodes: [
{
id: "Electricity & Heat",
color:"#ffa500",
offset: -110
},
{
id: "Residential",
color:"#74ffe7",
column: 2,
offset: 50
},
{
id: "Commercial",
color:"#8cff74",
column: 2,
offset: 50
},
{
id: "Industrial",
color:"#ff8da1",
column: 2,
offset: 50
},
{
id: "Transportation",
color:"#f4c0ff",
column: 2,
offset: 50
},
{
id: "Rejected Energy",
color:"#e6e6e6",
column: 3,
offset: -30
},
{
id: "Energy Services",
color:"#F9E79F",
column: 3
},
{
id:"Solar",
color:"#009c00"
},
{
id:"Nuclear",
color:"#1a8dff"
},
{
id:"Hydro",
color:"#009c00"
},
{
id:"Wind",
color:"#009c00"
},
{
id:"Geothermal",
color:"#009c00"
},
{
id:"Natural Gas",
color:"#1a8dff"
},
{
id:"Biomass",
color:"#009c00"
},
{
id: "Coal",
color: "#989898"
},
{
id: "Petroleum",
color: "#989898",
offset: -1
}
],
data: [
["Solar", "Electricity & Heat", 0.48],
["Nuclear", "Electricity & Heat", 8.42],
["Hydro", "Electricity & Heat", 2.75],
["Wind", "Electricity & Heat", 2.35],
["Geothermal", "Electricity & Heat", 0.15],
["Natural Gas", "Electricity & Heat", 9.54],
["Coal", "Electricity & Heat", 12.7],
["Biomass", "Electricity & Heat", 0.52],
["Petroleum", "Electricity & Heat", 0.21],
["Electricity & Heat", "Residential", 4.7],
["Solar", "Residential", 0.19],
["Geothermal", "Residential", 0.04],
["Natural Gas", "Residential", 4.58],
["Biomass", "Residential", 0.33],
["Petroleum", "Residential", 0.88],
["Electricity & Heat", "Commercial", 4.6],
["Solar", "Commercial", 0.08],
["Geothermal", "Commercial", 0.02],
["Natural Gas", "Commercial", 3.29],
["Coal", "Commercial", 0.02],
["Biomass", "Commercial", 0.16],
["Petroleum", "Commercial", 0.83],
["Electricity & Heat", "Industrial", 3.23],
["Solar", "Industrial", 0.02],
["Hydro", "Industrial", 0.01],
["Natural Gas", "Industrial", 9.84],
["Coal", "Industrial", 1.24],
["Biomass", "Industrial", 2.48],
["Petroleum", "Industrial", 8.38],
["Electricity & Heat", "Transportation", 0.03],
["Natural Gas", "Transportation", 0.76],
["Biomass", "Transportation", 1.43],
["Petroleum", "Transportation", 25.9],
["Electricity & Heat", "Rejected Energy", 24.7],
["Residential", "Rejected Energy", 3.75],
["Commercial", "Rejected Energy", 3.15],
["Industrial", "Rejected Energy", 12.9],
["Transportation", "Rejected Energy", 22.2],
["Residential", "Energy Services", 6.97],
["Commercial", "Energy Services", 5.84],
["Industrial", "Energy Services", 12.4],
["Transportation", "Energy Services", 5.91]
],
type: "sankey",
name: "Energy Consumption",
dataLabels: {
style: {
color: "#1a1a1a",
textOutline: false
}
}
}
]
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.