Support Chartjs In Svg Format

Author: Kuan Cheang
Version: v1.0
Date: 6/17/2020

© Copyright 2020, Example Company Ltd.

This document, which contains confidential material, is private and confidential and is the property and copyright of Example Company Ltd.. No part of this document may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, chemical, photocopy, recording or otherwise without the prior written permission of Example. Upon completion of the Support Chartjs In Svg Format for Happyfarm, the copyright of this document will be transferred to Happyfarm.

Support Chartjs in SVG format

It will be great if we can draw a chart using markdown, save the time to draw a chart in the document. Dataset can be easily changed in the markdown document.

Example 1

var data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)',
      ],
      borderWidth: 1,
    },
  ],
};

new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    }
  },
})
># of VotesRedBlueYellowGreenPurpleOrange20181614121086420
new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
      datasets: [{
          data: [20, 10, 4, 2]
      }]
    }
});
>undefinedRunningSwimmingEatingCycling2018161412108642
new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
        datasets: [{
          data: [20, 10, 4, 2],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)
        }]
    }
});
>undefined468101214161820CyclingEatingSwimmingRunning468101214161820CyclingEatingSwimmingRunning