Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground
Initializing
Liveweave
Web
expand_more
home
Home
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
frame_source
Python Playground
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Fork
account_circle
Login
settings
Settings
expand_more
Editor font
14
px
A
A
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
left_panel_close
AI Assistant
dashboard
All
HTML
CSS
JS
visibility
Preview
bolt
Live Preview
terminal
JS Console
<!DOCTYPE html> <html> <head> <title>HighCharts Percentage-Stacked Area Chart</title> <script src="https://code.highcharts.com/highcharts.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> </head> <body> <!-- Start your code here --> <figure class="highcharts-figure"> <div id="container"></div> <p class="highcharts-description"> A demo showing a stacked area chart, also sometimes referred to as a mountain chart. In a stacked chart, the data series values are added together to make up a total. </p> </figure> <!-- End your code here --> </body> </html>
#container { height: 400px; } .highcharts-figure, .highcharts-data-table table { min-width: 310px; max-width: 800px; margin: 1em auto; } .highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #ebebeb; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; } .highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; } .highcharts-data-table th { font-weight: 600; padding: 0.5em; } .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; } .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; } .highcharts-data-table tr:hover { background: #f1f7ff; }
Highcharts.chart('container', { chart: { type: 'area' }, title: { text: 'Greenhouse gases from Norwegian economic activity', align: 'left' }, subtitle: { text: 'Source: ' + '<a href="https://www.ssb.no/en/statbank/table/09288/"' + 'target="_blank">SSB</a>', align: 'left' }, yAxis: { title: { useHTML: true, text: 'Million tonnes CO<sub>2</sub>-equivalents' } }, tooltip: { shared: true, headerFormat: '<span style="font-size:12px"><b>{point.key}</b></span>' + '<br>' }, plotOptions: { series: { pointStart: 2012 }, area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, series: [{ name: 'Ocean transport', data: [ 13234, 12729, 11533, 17798, 10398, 12811, 15483, 16196, 15060, 13365, 13301 ] }, { name: 'Households', data: [ 6686, 6536, 6389, 6384, 6251, 5719, 5611, 5040, 5079, 5088, 4988 ] }, { name: 'Agriculture and hunting', data: [ 4812, 4872, 4961, 5001, 5070, 5035, 5045, 5004, 5015, 5076, 4935 ] }, { name: 'Air transport', data: [ 3502, 3844, 4139, 4351, 3802, 4020, 4461, 5074, 1558, 1247, 2694 ] }, { name: 'Construction', data: [ 2019, 2189, 2150, 2217, 2179, 2258, 2348, 2196, 2018, 2180, 2127 ] }] });
terminal
JavaScript Console
Preview
Clear
close
›
Run