Skip to content
Gallery
Custom SVG Gantt Chart
Custom SVG Gantt Chart
Chart Segments
Color Options
Code Engine
More
Share
Explore

icon picker
Code Engine

Helper Variables

Chart Header

⁠
<svg width='100%' height='180px' viewBox='0 0 800 180' xmlns='http://www.w3.org/2000/svg'>
⁠
⁠

Chart Data

*This also includes the header background and the bottom border
⁠
<g class='bars'><rect class='data' fill='#DDDDDD' width='100%' height='28' y='0'></rect> <rect class='data' fill='#7F9FDA' width='153.00546448087434' height='28' x='30.601092896174865' y='36' rx='8'></rect><rect class='data' fill='#EA9562' width='177.04918032786887' height='28' x='131.14754098360658' y='72' rx='8'></rect><rect class='data' fill='#A170B8' width='262.29508196721315' height='28' x='214.20765027322406' y='108' rx='8'></rect><rect class='data' fill='#00AEB3' width='212.0218579234973' height='28' x='550.8196721311476' y='144' rx='8'></rect> <rect class='data' fill='#DDDDDD' width='100%' height='1' y='179'></rect> </g>
⁠
⁠

Chart Segment Bar

*This also includes bar labels
⁠
<g class='markers'> <rect text-anchor='' fill='#EEEEEE' x='0px' y='0' width='1px' height='180'></rect> <rect fill='#EEEEEE' x='8.469945355191257%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='16.39344262295082%' y='0' width='1px' height='179'></rect><rect fill='#7F9FDA' x='24.863387978142075%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='33.060109289617486%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='41.53005464480874%' y='0' width='1px' height='179'></rect><rect fill='#D56767' x='49.72677595628415%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='58.19672131147541%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='66.66666666666666%' y='0' width='1px' height='179'></rect><rect fill='#7F9FDA' x='74.86338797814209%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='83.33333333333334%' y='0' width='1px' height='179'></rect><rect fill='#EEEEEE' x='91.53005464480874%' y='0' width='1px' height='179'></rect><rect fill='#7F9FDA' x='99.875%' y='0' width='1px' height='179'></rect> </g> <g text-anchor='middle'> <text text-anchor='start' fill='#000000' x='0' y='0'></text> <text fill='#000000' x='4.2349726775956285%' y='22'>Jan</text><text fill='#000000' x='12.431693989071038%' y='22'>Feb</text><text fill='#7F9FDA' x='20.628415300546447%' y='22'>Mar</text><text fill='#000000' x='28.96174863387978%' y='22'>Apr</text><text fill='#000000' x='37.295081967213115%' y='22'>May</text><text fill='#D56767' x='45.62841530054645%' y='22'>Jun</text><text fill='#000000' x='53.96174863387978%' y='22'>Jul</text><text fill='#000000' x='62.431693989071036%' y='22'>Aug</text><text fill='#7F9FDA' x='70.76502732240436%' y='22'>Sep</text><text fill='#000000' x='79.09836065573771%' y='22'>Oct</text><text fill='#000000' x='87.43169398907105%' y='22'>Nov</text><text fill='#7F9FDA' x='95.70252732240436%' y='22'>Dec</text> <text fill='#FFFFFF' x='107.10382513661203px' y='54px'>One</text><text fill='#FFFFFF' x='219.672131147541px' y='90px'>Two</text><text fill='#FFFFFF' x='345.3551912568306px' y='126px'>Three</text><text fill='#FFFFFF' x='656.8306010928962px' y='162px'>Four</text> <text text-anchor='end' fill='#000000' x='100%' y='0'></text> </g>
⁠
⁠

Chart Encoded

⁠
data:image/svg+xml,%3Csvg%20width='100%'%20height='180px'%20viewBox='0%200%20800%20180'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20class='bars'%3E%3Crect%20class='data'%20fill='%23DDDDDD'%20width='100%'%20height='28'%20y='0'%3E%3C/rect%3E%20%20%3Crect%20class='data'%20fill='%237F9FDA'%20width='153.00546448087434'%20height='28'%20x='30.601092896174865'%20y='36'%20rx='8'%3E%3C/rect%3E%3Crect%20class='data'%20fill='%23EA9562'%20width='177.04918032786887'%20height='28'%20x='131.14754098360658'%20y='72'%20rx='8'%3E%3C/rect%3E%3Crect%20class='data'%20fill='%23A170B8'%20width='262.29508196721315'%20height='28'%20x='214.20765027322406'%20y='108'%20rx='8'%3E%3C/rect%3E%3Crect%20class='data'%20fill='%2300AEB3'%20width='212.0218579234973'%20height='28'%20x='550.8196721311476'%20y='144'%20rx='8'%3E%3C/rect%3E%20%20%3Crect%20class='data'%20fill='%23DDDDDD'%20width='100%'%20height='1'%20y='179'%3E%3C/rect%3E%20%20%3C/g%3E%20%20%3Cg%20class='markers'%3E%20%20%20%20%3Crect%20text-anchor=''%20fill='%23EEEEEE'%20x='0px'%20y='0'%20width='1px'%20height='180'%3E%3C/rect%3E%20%20%20%20%3Crect%20fill='%23EEEEEE'%20x='8.469945355191257%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='16.39344262295082%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%237F9FDA'%20x='24.863387978142075%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='33.060109289617486%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='41.53005464480874%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23D56767'%20x='49.72677595628415%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='58.19672131147541%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='66.66666666666666%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%237F9FDA'%20x='74.86338797814209%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='83.33333333333334%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%23EEEEEE'%20x='91.53005464480874%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%3Crect%20fill='%237F9FDA'%20x='99.875%'%20y='0'%20width='1px'%20height='179'%3E%3C/rect%3E%20%20%3C/g%3E%20%20%3Cg%20text-anchor='middle'%3E%20%20%20%20%3Ctext%20text-anchor='start'%20fill='%23000000'%20x='0'%20y='0'%3E%3C/text%3E%20%20%20%20%3Ctext%20fill='%23000000'%20x='4.2349726775956285%'%20y='22'%3EJan%3C/text%3E%3Ctext%20fill='%23000000'%20x='12.431693989071038%'%20y='22'%3EFeb%3C/text%3E%3Ctext%20fill='%237F9FDA'%20x='20.628415300546447%'%20y='22'%3EMar%3C/text%3E%3Ctext%20fill='%23000000'%20x='28.96174863387978%'%20y='22'%3EApr%3C/text%3E%3Ctext%20fill='%23000000'%20x='37.295081967213115%'%20y='22'%3EMay%3C/text%3E%3Ctext%20fill='%23D56767'%20x='45.62841530054645%'%20y='22'%3EJun%3C/text%3E%3Ctext%20fill='%23000000'%20x='53.96174863387978%'%20y='22'%3EJul%3C/text%3E%3Ctext%20fill='%23000000'%20x='62.431693989071036%'%20y='22'%3EAug%3C/text%3E%3Ctext%20fill='%237F9FDA'%20x='70.76502732240436%'%20y='22'%3ESep%3C/text%3E%3Ctext%20fill='%23000000'%20x='79.09836065573771%'%20y='22'%3EOct%3C/text%3E%3Ctext%20fill='%23000000'%20x='87.43169398907105%'%20y='22'%3ENov%3C/text%3E%3Ctext%20fill='%237F9FDA'%20x='95.70252732240436%'%20y='22'%3EDec%3C/text%3E%20%20%20%20%3Ctext%20fill='%23FFFFFF'%20x='107.10382513661203px'%20y='54px'%3EOne%3C/text%3E%3Ctext%20fill='%23FFFFFF'%20x='219.672131147541px'%20y='90px'%3ETwo%3C/text%3E%3Ctext%20fill='%23FFFFFF'%20x='345.3551912568306px'%20y='126px'%3EThree%3C/text%3E%3Ctext%20fill='%23FFFFFF'%20x='656.8306010928962px'%20y='162px'%3EFour%3C/text%3E%20%20%20%20%3Ctext%20text-anchor='end'%20fill='%23000000'%20x='100%'%20y='0'%3E%3C/text%3E%20%20%3C/g%3E%3C/svg%3E
⁠
⁠


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.