SASS and JS library to integrate Chart.js with CSS.
- The current version only works for Chart.Js version 2.x
- For Chart.Js version 1.x use the Git tagged version of ChartJs-SASS v1.0.0
- Download ChartJS-Sass as zip and extract to your project.
- Create a chart.js using the
<canvas>object, see example format here: link - Include jQuery, Chart.js and chartjs-sass javascript and stylesheets at the top of your document, i.e. above your script calls to build the charts.
e.g. add the following to the
<head>section of your page<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <script src="/js/chartjs-sass.js"></script> <link rel="stylesheet" href="/css/chartjs-sass-default.css">
- Parse the Chart.js data before creating the chart, this will retrieve each color for each dataset and inject into the data object. (see [API below](## Mixin chart_colors API))
//No colors are required to be specified in the js (as it should be!!) var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", data: [65, 59, 80, 81, 56, 55, 40] }, { label: "My Second dataset", data: [28, 48, 40, 19, 86, 27, 90] } ] }; //Get context object var ctx = document.getElementById("myChart").getContext("2d"); // *** Parse the data to add colors from CSS here *** data = parse_css_colors("myChart", CHART_TYPES.LINE, data); //Create Chart var myChart = new Chart(ctx).Line(data);
-
Use Sass to modify/create your own custom chart formats.
-
Import
chartjs-sass.scssinto your custom scss file. e.g.@import 'chartjs-sass'; -
Create chart specific formatting by including a parent selector, or formatting for all charts without.
Create formatting for a specific chart only
#myTestChart { @include chart_colors((pink, red, blue, yellow, orange)); }Create default formatting for all charts
@include chart_colors((orange, pink, red)); -
Include your custom css file into your head file, after the default stylesheet, e.g.
<link rel="stylesheet" href="/css/chartjs-sass-default.css"> <link rel="stylesheet" href="/css/my-custom-chart-formats.css">
There are two optional inputs to the chart_colors sass mixin:
@mixin chart_colors($base_colors:null, $num_required:null)
- $base_colors
- Allowed values:
null, a single color, or array of colors (sass understands singletons as 1 length arrays) - These will map in the same order to the data provided, i.e. Dataseries_1 => Color_1 etc.
- Allowed values:
- $num_required
- Allowed values:
null, or a positive integer - If missing or null, it will create only the formatting for the provided
$base_colors - If provided, it will create formatting for each dataseries up the number required. If the number required is greater than the number of
$base_colorsprovided then it will use random colors.
- Allowed values:
- Output
- Will use each of the base colors (or random colors) to create formatting for each type of chart.
- To keep things simple, it creates a slightly bloated CSS with formatting for each chart type.
- Parsing CSS - parse_css_colors()
parse_css_colors()will parse each provided dataset and add the colors defined in the css.- Simply put, it will assign the class for each series to an object in the dom then retrieve the color based on that.
Sample output:
```
.line.backgroundColor_1,
.scatter.backgroundColor_1,
.radar.backgroundColor_1 {
color: rgba(151, 187, 205, 0.3); }
.line.borderColor_1,
.scatter.borderColor_1,
.radar.borderColor_1 {
color: #97bbcd; }
.line.pointBackgroundColor_1,
.scatter.pointBackgroundColor_1,
.radar.pointBackgroundColor_1 {
color: #97bbcd; }
.line.pointBorderColor_1,
.scatter.pointBorderColor_1,
.radar.pointBorderColor_1 {
color: #97bbcd; }
.line.hoverBackgroundColor_1,
.scatter.hoverBackgroundColor_1,
.radar.hoverBackgroundColor_1 {
color: #528eac; }
```