Skip to content

Instantly share code, notes, and snippets.

@rajeshpillai

rajeshpillai/canvasjs-theme.js

Created October 17, 2019 00:39
Show Gist options
  • Save rajeshpillai/eed2ed98fc6a4bc610e843473e69963b to your computer and use it in GitHub Desktop.
Save rajeshpillai/eed2ed98fc6a4bc610e843473e69963b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rajeshpillai created this gist Oct 17, 2019.
    71 changes: 71 additions & 0 deletions canvasjs-theme.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    CanvasJS-themes
    ===============

    Adds the ability to use customized themes with CanvasJS. For documentation, refer to http://canvasjs.com



    Adding your own theme
    =====================

    Include this before you call CanvasJS.Chart(). You can edit as you want.

    var isCanvasSupported = !!document.createElement("canvas").getContext; // You might want to remove this line if you are not planning on using it.

    var theme = {
    Chart: {
    colorSet: "colorSet1"
    },
    Title: {
    fontFamily: isCanvasSupported ? "Calibri, Optima, Candara, Verdana, Geneva, sans-serif" : "calibri",
    fontSize: 33,
    fontColor: "#3A3A3A",
    fontWeight: "bold",
    verticalAlign: "top",
    margin: 10
    },
    Axis: {
    titleFontSize: 26,
    titleFontColor: "#666666",
    titleFontFamily: isCanvasSupported ? "Calibri, Optima, Candara, Verdana, Geneva, sans-serif" : "calibri",

    labelFontFamily: isCanvasSupported ? "Calibri, Optima, Candara, Verdana, Geneva, sans-serif" : "calibri",
    labelFontSize: 18,
    labelFontColor: "grey",
    tickColor: "#BBBBBB",
    tickThickness: 2,
    gridThickness: 2,
    gridColor: "#BBBBBB",
    lineThickness: 2,
    lineColor: "#BBBBBB"
    },
    Legend: {
    verticalAlign: "bottom",
    horizontalAlign: "center",
    fontFamily: isCanvasSupported ? "monospace, sans-serif,arial black" : "calibri"
    },
    DataSeries: {
    //bevelEnabled: true,
    indexLabelFontColor: "grey",
    //indexLabelFontFamily: "Trebuchet MS, monospace, Courier New, Courier",
    indexLabelFontFamily: isCanvasSupported ? "Calibri, Optima, Candara, Verdana, Geneva, sans-serif" : "calibri",
    //indexLabelFontWeight: "bold",
    indexLabelFontSize: 18,
    //indexLabelLineColor: "lightgrey",
    indexLabelLineThickness: 1
    }
    }
    CanvasJS.addTheme('Pnoexz',theme); // You can use any name

    You then use them as any other theme

    var chart = new CanvasJS.Chart("someElement", {
    title: { text: "Company Stars" },
    theme: 'Pnoexz',
    ...

    TODO
    ====

    - Add minimized version.
    - Maybe throw in a few themes.