logo logo

Support Chartjs in SVG format

Author: Kuan Cheang
Version: v1.0
Date: 10/7/2021

© Copyright 2020, Asian Software Quality Institute Limited (ASQI)

This document, which contains confidential material, is private and confidential and is the property and copyright of ASQI. 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 ASQI. Upon completion of the Support Chartjs in SVG format for SJM, the copyright of this document will be transferred to SJM.

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)
        }]
    }
});
>undefinedCyclingEatingSwimmingRunning468101214161820