Get started in under a minute.

Three steps: include the bundle, drop a chart, change its data. The chart below is the same spec from Step 2, rendered by the real engine — not a screenshot.

1. 1. Include the bundle

   <script type="module" src="https://meikucharts.com/v1/live-chart.js"></script>

   Copy

   One hosted file from meikucharts.com, no build step. npm package ships at launch.

2. 2. Drop a chart

   <live-chart>
     <script type="application/json">
       {
         "type": "column",
         "theme": "editorial",
         "title": "Weekly Signups",
         "source": "Product analytics",
         "data": {
           "labels": [
             "Mon",
             "Tue",
             "Wed",
             "Thu",
             "Fri"
           ],
           "series": [
             {
               "name": "Signups",
               "values": [
                 12,
                 19,
                 14,
                 27,
                 22
               ]
             }
           ]
         }
       }
     </script>
   </live-chart>

   Copy

   A JSON spec, right in the markup. No build step required.

3. 3. Change data — it morphs

   const chart = document.querySelector("live-chart");
   chart.spec = {
     "type": "line",
     "theme": "mint",
     "title": "Weekly Signups",
     "source": "Product analytics",
     "data": {
       "labels": [
         "Mon",
         "Tue",
         "Wed",
         "Thu",
         "Fri"
       ],
       "series": [
         {
           "name": "Signups",
           "values": [
             18,
             24,
             20,
             33,
             29
           ]
         }
       ]
     }
   };

   Copy

   Set .spec from code and the chart animates to the new shape.

16 KB gzipped · zero dependencies · MIT — live examples of every type on /examples, the full contract in the docs.