string|string[] | `'brewer.Paired12'` | Color scheme name that is any of [Color Chart](https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html). It also accepts an array of color strings, which is primarily for ES modules. [more...](#usage-in-es6-as-module)
99 | | `reverse` | `boolean` | `false` | If set to `true`, the order of the colors in the selected scheme is reversed.
100 | | `override` | `boolean` | `false` | If set to `true`, the specified color scheme will override the existing color options. If `false`, it is only applied when no color setting exists. [more...](#overriding-existing-color-settings)
101 | | `custom` | `function` | `undefined` | A function that takes a copy of the color string array for `scheme` in order to extend the predefined scheme colors. [more...](#custom-function)
102 |
103 | ### Overriding Existing Color Settings
104 |
105 | By default, this plugin doesn't apply a color scheme if any color options are already specified. This may cause a problem if you are using a third party library such as [ng-charts](https://valor-software.com/ng2-charts/), which automatically applies default color settings. In that case, the existing color settings can be overridden by setting the `override` option to `true`.
106 |
107 | ### `custom`-Function
108 |
109 | With the help of the `custom`-Function you can extend the predefined scheme colors. This function takes a copy of the current scheme and is expected to return an array with at least one element. See the example below.
110 |
111 | ```js
112 | var customColorFunction = function(schemeColors) {
113 | var myColors = ['#ff0000', '#00ff00', '#0000ff']; // define/generate own colors
114 |
115 | // extend the color scheme with own colors
116 | Array.prototype.push.apply(schemeColors, myColors);
117 |
118 | return schemeColors; // optional: this is not needed if the array is modified in place
119 | };
120 |
121 | // ...
122 | options: {
123 | plugins: {
124 | colorschemes: {
125 | scheme: 'brewer.Paired12',
126 | custom: customColorFunction
127 | }
128 | }
129 | }
130 | //...
131 |
132 | ```
133 |
134 | ### `custom` colorscheme from scratch
135 |
136 | It is possible to build your custom colorscheme from scratch (without using the `custom` function) by simply defining the colors it contains. See example below.
137 |
138 | ```js
139 | var myColors = ['red', 'green', 'blue', 'orange', 'black', 'yellow'];
140 |
141 | // ...
142 | options: {
143 | plugins: {
144 | colorschemes: {
145 | scheme: myColors
146 | }
147 | }
148 | }
149 | //...
150 |
151 | ```
152 |
153 | ## Building
154 |
155 | You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):
156 |
157 | ```bash
158 | npm install
159 | ```
160 |
161 | The following commands will then be available from the repository root:
162 |
163 | ```bash
164 | gulp build # build dist files
165 | gulp build --watch # build and watch for changes
166 | gulp test # run all tests
167 | gulp test --watch # run all tests and watch for changes
168 | gulp test --coverage # run all tests and generate code coverage
169 | gulp lint # perform code linting
170 | gulp package # create an archive with dist files and samples
171 | ```
172 |
173 | ## License
174 |
175 | chartjs-plugin-colorschemes is available under the [MIT license](https://opensource.org/licenses/MIT).
176 |
--------------------------------------------------------------------------------
/docs/.eslintrc.yml:
--------------------------------------------------------------------------------
1 | plugins: [es, html]
2 |
3 | extends: [
4 | plugin:es/no-2018,
5 | plugin:es/no-2017,
6 | plugin:es/no-2016,
7 | plugin:es/no-2015
8 | ]
9 |
10 | globals:
11 | Chart: true
12 | XLSX: true
13 | ChartDataSource: true
14 |
15 | parserOptions:
16 | sourceType: script
17 |
18 | rules:
19 | no-unused-vars: 0
20 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | First, we need to include Chart.js and chartjs-plugin-colorschemes.js in our page.
37 |<script type="text/javascript" src="Chart.js"></script>
41 |<script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script>
42 |We need to have a canvas in our page.
49 |<canvas id="myChart"></canvas>
53 |Now, we can create a chart. We add a script to our page.
Random number datasets are generated in this example.
var ctx = document.getElementById('myChart').getContext('2d');
64 |var chart = new Chart(ctx, {
65 |type: 'line',
66 |data: {
67 |labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
68 |datasets: [1, 2, 3].map(function(i) { 69 |
return { 70 |
label: 'Dataset ' + i, 71 |
data: [0, 0, 0, 0, 0, 0, 0].map(Math.random), 72 |
fill: false 73 |
}; 74 |
})
75 |}
76 |});
77 |We can pick a color scheme from Color Chart.
84 |...
88 |options: {
89 |plugins: {
90 |colorschemes: {
91 |scheme: 'brewer.Paired12'
92 |}
93 |}
94 |}
95 |98 | Color Scheme: 99 | Number of Datasets: 100 |
101 |See also GitHub repository and Color Chart
118 |まず Chart.js、chartjs-plugin-colorschemes.js をページに含める必要があります。
37 |<script type="text/javascript" src="Chart.js"></script>
41 |<script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script>
42 |ページに Canvas を設置します。
49 |<canvas id="myChart"></canvas>
53 |これでチャートを作成することができます。スクリプトをページに追加します。
この例では、ランダムな数値のデータセットを生成しています。
var ctx = document.getElementById('myChart').getContext('2d');
64 |var chart = new Chart(ctx, {
65 |type: 'line',
66 |data: {
67 |labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
68 |datasets: [1, 2, 3].map(function(i) { 69 |
return { 70 |
label: 'Dataset ' + i, 71 |
data: [0, 0, 0, 0, 0, 0, 0].map(Math.random), 72 |
fill: false 73 |
}; 74 |
})
75 |}
76 |});
77 |カラーチャートから好きなカラースキームを選びます。
84 |...
88 |options: {
89 |plugins: {
90 |colorschemes: {
91 |scheme: 'brewer.Paired12'
92 |}
93 |}
94 |}
95 |98 | カラースキーム: 99 | データセット数: 100 |
101 |GitHub リポジトリとカラーチャートもご覧ください。
118 |31 | 32 | 33 | 34 | 35 | 36 |
37 |38 | Color Scheme: 39 | 40 | Background: 41 | 45 |
46 |