Bezel Charts

Charts that look finished the moment you add them.

Ten polished chart tiles as web components. Write one HTML tag, pass your numbers, done. Every chart also exports as a static SVG for READMEs, Notion and slides, where JavaScript can't run.

Ten chart types · sample data

SparklineA trend with its latest value up front.
LineCompare series over time, with notes on key moments.
BarsTotals per period, peak highlighted.
RingsOne goal, or several nested.
DonutHow a total splits into parts.
ScatterHow two measures move together, with a trend line and its r value.
GaugeA reading on a scale, coloured by zone.
Grouped barsCompare series side by side. Separate them with a | in values.
ProgressStacked parts against a target.
HeatmapActivity by day, GitHub style. Perfect for a README.

Studio

Pick a chart, add your numbers and make it yours. Then copy the code, or save it as an image for a README or slide.

Preview on
Your chart 

          
Paste the script once per page, then add as many charts as you like.

        

      


      

        

          
          
          
        

        

        
        
        

          
        

      

    

  


  

    
Add to your site

    
Add the script once per page, then use any chart tag, or copy a finished one from the Studio. Hover a chart for exact values. Every option is an attribute, so the same HTML works in plain pages, React, Vue or a CMS.


<script type="module" src="https://cdn.jsdelivr.net/gh/ShazMoghaddam/bezel-charts@1/dist/bezel-charts.min.js"></script>

<bezel-bars heading="Commits" values="4,9,6,3,8" labels="M,T,W,T,F"></bezel-bars>

    
Need a picture instead of a live chart? Use Save SVG in the Studio, commit the file, then add it to your README with ![Chart](chart.svg). From code, call chart.toSVG().