Charts

<!-- Line chart: Multiple lines of different color + Legend -->
<canvas data-chart='{
  "type": "line",
  "data": {
    "labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [12, 9, 7, 8, 6, 4, 3, 2, 0],
        "backgroundColor": "rgba(68,140,116,.35)",
        "borderWidth": 2,
        "borderColor": "#448c74",
        "pointBackgroundColor": "#448c74",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(68,140,116,.35)",
        "pointHoverBorderColor": "#448c74",
        "pointHoverBorderWidth": 6
      },
      {
        "label": "Dataset 2",
        "data": [2, 1, 3, 7, 9, 6, 7.7, 4, 7],
        "backgroundColor": "rgba(237,203,80,.35)",
        "borderWidth": 2,
        "borderColor": "#edcb50",
        "pointBackgroundColor": "#edcb50",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(237,203,80,.35)",
        "pointHoverBorderColor": "#edcb50",
        "pointHoverBorderWidth": 6
      },
      {
        "label": "Dataset 2",
        "data": [1, 3, 4, 5, 6, 8, 9, 10, 11],
        "backgroundColor": "rgba(237,80,80,.35)",
        "borderWidth": 2,
        "borderColor": "#ed5050",
        "pointBackgroundColor": "#ed5050",
        "pointBorderWidth": 8,
        "pointBorderColor": "rgba(237,80,80,.35)",
        "pointHoverBorderColor": "#ed5050",
        "pointHoverBorderWidth": 6
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      },
      "x": {
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>

<!-- Bar chart: Multiple bars of different color + Legend -->
<canva data-chart='{
  "type": "bar",
  "data": {
    "labels": ["2018", "2019", "2020", "2021", "2022", "2023"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [12000, 9000, 7000, 8000, 11000, 6000],
        "borderWidth": 2,
        "borderColor": "#448c74",
        "backgroundColor": "rgba(68,140,116,.35)",
        "hoverBackgroundColor": "rgba(68,140,116,.75)"
      },
      {
        "label": "Dataset 2",
        "data": [3500, 5000, 8750, 1300, 3000, 8750],
        "borderWidth": 2,
        "borderColor": "#edcb50",
        "backgroundColor": "rgba(237,203,80,.35)",
        "hoverBackgroundColor": "rgba(237,203,80,.75)"
      }
    ]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      },
      "x": {
        "border": {
          "color": "rgba(133,140,151,.18)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>

<!-- Pie chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
  "type": "pie",
  "data": {
    "labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
    "datasets": [
      {
        "label": "Value, %",
        "data": [42, 25, 33],
        "borderWidth": 0,
        "backgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ],
        "hoverBackgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": {
        "position": "right",
        "labels": {
          "usePointStyle": true,
          "boxWidth": 12,
          "boxHeight": 12,
          "useBorderRadius": true,
          "borderRadius": 8,
          "padding": 20,
          "font": {
            "size": 15
          }
        }
      }
    }
  }
}'></canvas>

<!-- Doughnut chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
  "type": "doughnut",
  "data": {
    "labels": ["Dataset 1", "Dataset 2", "Dataset 3"],
    "datasets": [
      {
        "label": "Value, %",
        "data": [42, 25, 33],
        "borderWidth": 0,
        "backgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ],
        "hoverBackgroundColor": [
          "#448c74",
          "#ed5050",
          "#edcb50"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": {
        "position": "right",
        "labels": {
          "usePointStyle": true,
          "boxWidth": 12,
          "boxHeight": 12,
          "useBorderRadius": true,
          "borderRadius": 8,
          "padding": 20,
          "font": {
            "size": 15
          }
        }
      }
    }
  }
}'></canvas>

<!-- Polar area chart: Multiple slices of different color + Legend -->
<canvas data-chart='{
  "type": "polarArea",
  "data": {
    "labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
    "datasets": [{
      "label": "My dataset",
      "data": [11, 16, 7, 3, 14],
      "borderWidth": 0,
      "backgroundColor": [
        "#ed5050",
        "#448c74",
        "#edcb50",
        "#e3e9ef",
        "#3f7fca"
      ],
      "hoverBackgroundColor": [
        "#ed5050",
        "#448c74",
        "#edcb50",
        "#e3e9ef",
        "#3f7fca"
      ]
    }]
  },
  "options": {
    "scales": {
      "r": {
        "ticks": {
          "backdropColor": "rgba(255,255,255,0)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>

<!-- Radar chart: Multiple lines of different color with fill enabled + Legend -->
<canvas data-chart='{
  "type": "radar",
  "data": {
    "labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    "datasets": [
      {
        "label": "Dataset 1",
        "data": [65, 59, 90, 81, 56, 55, 40],
        "fill": true,
        "backgroundColor": "rgba(237, 80, 80, .15)",
        "borderColor": "#ed5050",
        "pointBackgroundColor": "#ed5050",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "#ed5050"
      },
      {
        "label": "Dataset 2",
        "data": [28, 48, 40, 19, 96, 27, 100],
        "fill": true,
        "backgroundColor": "rgba(63, 127, 202, .15)",
        "borderColor": "#3f7fca",
        "pointBackgroundColor": "#3f7fca",
        "pointBorderColor": "#fff",
        "pointHoverBackgroundColor": "#fff",
        "pointHoverBorderColor": "#3f7fca"
      }
    ]
  },
  "options": {
    "elements": {
      "line": {
        "borderWidth": 3
      }
    },
    "scales": {
      "r": {
        "ticks": {
          "backdropColor": "rgba(255,255,255,0)"
        },
        "grid": {
          "color": "rgba(133,140,151,.18)"
        }
      }
    }
  }
}'></canvas>