### Get Scheme Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Demonstrates the step-by-step execution of the getScheme function with a specific input string. It shows the input processing, transformation, lookup, and return value. ```text getScheme('brewer.Paired12') 1. Input is string 2. No backward compat transformation needed 3. Split: category='brewer', name='Paired12' 4. Lookup: Chart.colorschemes['brewer']['Paired12'] 5. Return: ['#a6cee3', '#1f78b4', ...] ``` -------------------------------- ### Install via bower Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Install the plugin using bower for use in your project. ```bash bower install chartjs-plugin-colorschemes --save ``` -------------------------------- ### Install via npm Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Install the plugin using npm for use in your project. ```bash npm install chartjs-plugin-colorschemes --save ``` -------------------------------- ### Install chartjs-plugin-colorschemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/README.md Shows how to install the plugin using a script tag, npm, or as an ES6 module. ```javascript // Script tag // npm npm install chartjs-plugin-colorschemes // ES6 module import 'chartjs-plugin-colorschemes'; ``` -------------------------------- ### Pie Chart Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Example of applying a colorscheme to a pie chart. ```javascript options: { plugins: { colorschemes: { scheme: 'tableau.Tableau10' } } } ``` -------------------------------- ### Install Node Dependencies Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Before building the project, install the necessary Node.js dependencies using npm. This command should be run from the repository root. ```bash npm install ``` -------------------------------- ### Simple Bar Chart Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md A basic example of applying a colorscheme to a bar chart. ```javascript options: { plugins: { colorschemes: { scheme: 'office.Metro6' } } } ``` -------------------------------- ### HTML Setup with Script Tags Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Demonstrates how to include the Chart.js library and the colorschemes plugin using script tags in an HTML file. This is suitable for simple web pages. ```html

``` -------------------------------- ### Multi-Series Line Chart Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Example of applying a colorscheme with transparency to a multi-series line chart. ```javascript options: { plugins: { colorschemes: { scheme: 'brewer.Set2', fillAlpha: 0.2 } } } ``` -------------------------------- ### Demonstrate Configuration Precedence Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/configuration.md This example shows how per-chart options take precedence over global defaults. Set a global default first, then define a chart-specific option that overrides it. ```javascript // Example: Precedence demonstration // 1. Set global default Chart.defaults.global.plugins.colorschemes = { scheme: 'brewer.Blues9' }; // 2. Per-chart config overrides global const chart = new Chart(ctx, { options: { plugins: { colorschemes: { scheme: 'tableau.Tableau10' // This takes precedence } } } }); ``` -------------------------------- ### Basic Chart Creation with Random Data Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html This example demonstrates how to create a basic line chart with random data and sets up the chart object. ```javascript var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [1, 2, 3].map(function(i) { return { label: 'Dataset ' + i, data: [0, 0, 0, 0, 0, 0, 0].map(Math.random), fill: false }; }) } }); ``` -------------------------------- ### Plugin Options Usage Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Demonstrates how to apply the ColorSchemesPluginOptions within Chart.js configuration. Shows setting a specific scheme and fill alpha. ```javascript // In Chart.js options const options = { plugins: { colorschemes: { // ColorSchemesPluginOptions shape scheme: 'brewer.YlGn9', fillAlpha: 0.5, reverse: false, override: false, custom: undefined } } }; ``` -------------------------------- ### Color Scheme Naming Convention Examples Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Examples of how color schemes are named, combining category, scheme name, and color count. ```text brewer.YlGn9 // ColorBrewer Yellow-Green, 9 colors office.Aspect6 // Microsoft Office Aspect, 6 colors tableau.Tableau20 // Tableau, 20 colors ``` -------------------------------- ### Color Application Example for Line, Radar, Scatter Charts Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Provides a concrete example of color application for line, radar, and scatter charts, showing how colors are assigned to datasets based on the scheme and fill alpha. ```text scheme = ['#e41a1c', '#377eb8', '#4daf4a'] fillAlpha = 0.5 datasets = [A, B, C, D, E] Colors applied: Dataset A: '#e41a1c' with 50% opacity Dataset B: '#377eb8' with 50% opacity Dataset C: '#4daf4a' with 50% opacity Dataset D: '#e41a1c' with 50% opacity (cycles) Dataset E: '#377eb8' with 50% opacity (cycles) ``` -------------------------------- ### Transparency Examples Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Illustrates different values for the `fillAlpha` option to control the transparency of chart elements. ```javascript fillAlpha: 0.1 // Very transparent fillAlpha: 0.5 // Default (50%) fillAlpha: 0.9 // Mostly opaque fillAlpha: 1.0 // Fully opaque ``` -------------------------------- ### Configure Scheme: ColorBrewer Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/configuration.md Example of setting a ColorBrewer scheme for the colorschemes plugin. Ensure the scheme name is correctly formatted. ```javascript options: { plugins: { colorschemes: { scheme: 'brewer.YlGn9' } } } ``` -------------------------------- ### Dataset Color Storage Lifecycle Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Illustrates the process of storing original dataset colors before applying a scheme and restoring them afterward. Essential for maintaining original chart states. ```javascript // Before applying scheme: dataset.$colorschemes = {}; // After storing original blue color: dataset.$colorschemes = { backgroundColor: 'rgb(0, 0, 255)' }; // Apply scheme color: dataset.backgroundColor = 'rgb(135, 206, 235)'; // light blue from scheme // After update, restore: dataset.backgroundColor = 'rgb(0, 0, 255)'; // original blue delete dataset.$colorschemes; ``` -------------------------------- ### Color Array Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md An example of a valid color array, consisting of lowercase hexadecimal color strings. Ensures correct formatting for color schemes. ```javascript ['#f7fcb9', '#addd8e', '#31a354', '#006837'] ``` -------------------------------- ### Example Color Application for Pie Charts Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Demonstrates how a predefined color scheme is applied to dataset data points, showing the cycling behavior of colors. ```javascript scheme = ['#e41a1c', '#377eb8', '#4daf4a'] dataset.data = [10, 20, 30, 40, 50] Colors applied: Data point 0: '#e41a1c' Data point 1: '#377eb8' Data point 2: '#4daf4a' Data point 3: '#e41a1c' (cycles) Data point 4: '#377eb8' (cycles) ``` -------------------------------- ### ES6 Module Setup Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Shows how to import and use the Chart.js library and the colorschemes plugin within an ES6 module environment. This is recommended for modern JavaScript projects. ```javascript import Chart from 'chart.js'; import 'chartjs-plugin-colorschemes'; const ctx = document.getElementById('myChart').getContext('2d'); const chart = new Chart(ctx, { type: 'line', data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [ { label: 'Product A', data: [12, 19, 8, 15] }, { label: 'Product B', data: [10, 8, 12, 19] } ] }, options: { plugins: { colorschemes: { scheme: 'brewer.YlGn9' } } } }); ``` -------------------------------- ### getScheme Function Examples Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/plugin.colorschemes.md Shows how to use the internal getScheme function to resolve color schemes, either from a direct array of colors or a named scheme string. It also demonstrates the behavior with an invalid scheme. ```javascript // Direct color array getScheme(['#ff0000', '#00ff00', '#0000ff']); // Returns: ['#ff0000', '#00ff00', '#0000ff'] // Named scheme getScheme('brewer.Paired12'); // Returns: [array of 12 colors] // Invalid scheme getScheme('nonexistent.scheme'); // Returns: undefined ``` -------------------------------- ### Chart with Custom Modifier Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Demonstrates applying a colorscheme and using a custom function to add a color. ```javascript options: { plugins: { colorschemes: { scheme: 'brewer.Paired6', custom: function(colors) { colors.push('#000000'); // Add black return colors; } } } } ``` -------------------------------- ### Color Cycling Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/plugin.colorschemes.md Illustrates how colors are repeated when the number of datasets exceeds the available colors in a scheme. The scheme ['red', 'blue', 'green'] is used as an example. ```javascript // Scheme: ['red', 'blue', 'green'] // 5 datasets: uses red, blue, green, red, blue ``` -------------------------------- ### RGBA Color Conversion Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Demonstrates the conversion of a hex color to an RGBA string with a specified alpha value. ```javascript // Input hex: '#7fc97f' // With fillAlpha: 0.5 // Output: 'rgba(127, 201, 127, 0.5)' ``` -------------------------------- ### ColorBrewer Module Export Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Example of named exports for ColorBrewer schemes within the module. ```javascript export var SchemeName = [colors]; export var Another = [colors]; // ... all ColorBrewer schemes ``` -------------------------------- ### Configure Scheme: ES6 Imported Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/configuration.md Example of using an ES6 imported color scheme with the colorschemes plugin. Ensure the scheme is correctly imported from the library. ```javascript import { Blues9 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer'; options: { plugins: { colorschemes: { scheme: Blues9 } } } ``` -------------------------------- ### Office Module Export Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Example of named exports for Microsoft Office schemes within the module. ```javascript export var Adjacency6 = [colors]; export var Office6 = [colors]; // ... all Office schemes ``` -------------------------------- ### Complex Chart Example with Custom Scheme and Alpha Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Demonstrates a complex bar chart configuration using a named scheme ('brewer.Set2'), custom fill alpha, and a custom color modification function. ```javascript const ctx = document.getElementById('complexChart').getContext('2d'); const chart = new Chart(ctx, { type: 'bar', data: { labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'], datasets: [ { label: 'Product A - Sales', data: [12, 19, 15, 25, 22] }, { label: 'Product A - Returns', data: [2, 3, 1, 2, 1] }, { label: 'Product B - Sales', data: [18, 21, 20, 19, 23] }, { label: 'Product B - Returns', data: [1, 2, 2, 1, 2] }, { label: 'Product C - Sales', data: [9, 15, 12, 18, 16] }, { label: 'Product C - Returns', data: [1, 1, 1, 2, 1] } ] }, options: { responsive: true, scales: { yAxes: [{ stacked: false }] }, plugins: { colorschemes: { scheme: 'brewer.Set2', fillAlpha: 0.7, reverse: false, override: false, custom: function(colors) { // Modify colors as needed return colors; } } } } }); ``` -------------------------------- ### Pie Chart with Color Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Generates a pie chart and applies a predefined color scheme for its segments. This example assumes a canvas with the ID 'pieChart'. ```javascript const ctx = document.getElementById('pieChart').getContext('2d'); const chart = new Chart(ctx, { type: 'pie', data: { labels: ['Product A', 'Product B', 'Product C', 'Product D'], datasets: [ { data: [25, 30, 20, 25] } ] }, options: { plugins: { colorschemes: { scheme: 'tableau.Tableau10' } } } }); ``` -------------------------------- ### Custom Color Function Example Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Illustrates how to define a custom function to modify the color array before it's applied to the chart. ```javascript custom: function(colors) { // colors is a shallow copy colors.push('#FF00FF'); // Add custom color return colors; // Must return array } ``` -------------------------------- ### Basic Chart Initialization with Colorschemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Shows how to apply a color scheme to a chart during initialization by specifying the scheme in the plugin options. ```javascript const chart = new Chart(ctx, { type: 'bar', data: { /* ... */ }, options: { plugins: { colorschemes: { scheme: 'brewer.Paired12' } } } }); ``` -------------------------------- ### Main Module Entry Point Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/main-module.md This snippet shows the main entry point of the plugin, responsible for coordinating plugin registration and exposing color schemes globally. ```javascript // src/index.js import Chart from 'chart.js'; import colorschemes from './colorschemes/index'; import ColorSchemesPlugin from './plugins/plugin.colorschemes'; Chart.colorschemes = colorschemes; export default ColorSchemesPlugin; ``` -------------------------------- ### Build Distribution Files Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Compile the project's source code into distributable files. This is a standard step before deploying or packaging the plugin. ```bash gulp build ``` -------------------------------- ### Build and Watch for Changes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Build the project's distribution files and continuously watch for file changes to trigger automatic rebuilds. This is useful during development to see changes reflected quickly. ```bash gulp build --watch ``` -------------------------------- ### Tableau Module Export Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Example of named exports for Tableau schemes within the module. ```javascript export var Tableau10 = [colors]; export var HueCircle19 = [colors]; // ... all Tableau schemes ``` -------------------------------- ### Run All Tests Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Execute all defined test suites for the project. This command verifies the functionality and stability of the plugin. ```bash gulp test ``` -------------------------------- ### Create Distribution Package Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Generate an archive containing the distribution files and samples of the plugin. This package is typically used for distribution or deployment. ```bash gulp package ``` -------------------------------- ### Create Chart Instance Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Instantiate a new Chart.js chart with the plugin integrated. The plugin is prepared with merged user and global options. ```javascript const chart = new Chart(ctx, config); ``` -------------------------------- ### Using a Direct Color Array Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Shows how to provide an array of custom colors directly to the `scheme` option. ```javascript scheme: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'] ``` -------------------------------- ### Radar Chart with Color Schemes and Alpha Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Configures a radar chart with a specified color scheme and fill alpha. This example uses a canvas with the ID 'radarChart'. ```javascript const ctx = document.getElementById('radarChart').getContext('2d'); const chart = new Chart(ctx, { type: 'radar', data: { labels: ['Speed', 'Accuracy', 'Power', 'Endurance', 'Agility'], datasets: [ { label: 'Player A', data: [80, 85, 75, 90, 88] }, { label: 'Player B', data: [85, 80, 88, 82, 90] } ] }, options: { plugins: { colorschemes: { scheme: 'brewer.Paired6', fillAlpha: 0.4 } } } }); ``` -------------------------------- ### Consumption Patterns for Color Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Demonstrates different ways to import and use color schemes, including CommonJS and ES6 imports. ```javascript // CommonJS / global Chart.colorschemes.brewer.Paired12 // ES6 named import import { Paired12 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer'; // ES6 namespace import import * as brewer from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer'; const Paired12 = brewer.Paired12; ``` -------------------------------- ### Colorschemes Configuration Options Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Lists the available configuration options for the colorschemes plugin, including scheme, fillAlpha, reverse, override, and custom. ```javascript { scheme: 'brewer.Paired12', // Color scheme name or array of colors fillAlpha: 0.5, // Transparency: 0.0–1.0 reverse: false, // Reverse color order override: false, // Override existing colors custom: undefined // Function to modify colors } ``` -------------------------------- ### Setting Global Defaults (Chart.js 3.x) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Demonstrates how to set global default colorscheme options for Chart.js version 3.x. ```javascript Chart.defaults.plugins.colorschemes = { scheme: 'brewer.Blues9' }; ``` -------------------------------- ### Setting Global Defaults (Chart.js 2.x) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Demonstrates how to set global default colorscheme options for Chart.js version 2.x. ```javascript Chart.defaults.global.plugins.colorschemes = { scheme: 'brewer.Blues9' }; ``` -------------------------------- ### Get Scheme Function Flow Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Describes the process of resolving a color scheme based on the input parameter. It handles array inputs, string inputs with backward compatibility, and looks up schemes in Chart.colorschemes. ```text Input: scheme parameter │ ├─ Is array? → Return as-is │ └─ Is string? │ ├─ Apply backward compatibility transforms │ "brewer.Paired1-12" → "brewer.PairedOne12" │ "office.Office2007-2010-6" → "office.OfficeClassic6" │ ├─ Split on '.' → [category, name] │ ├─ Lookup Chart.colorschemes[category][name] │ └─ Return color array or undefined ``` -------------------------------- ### Include via CDN Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Include the plugin directly in your HTML using a CDN link. ```html ``` ```html ``` -------------------------------- ### Override Behavior Explanation Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Explains the difference between `override: false` (default) and `override: true` for applying color schemes to datasets. ```plaintext // override: false (default) // Color scheme only applied to datasets with no color settings // override: true // Color scheme applied to ALL datasets, overwriting existing colors ``` -------------------------------- ### Browser Global Usage and Auto-Registration Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/main-module.md Demonstrates how to include the plugin via a script tag in a browser, where it auto-registers and makes Chart.colorschemes globally available. ```html ``` -------------------------------- ### Using ColorBrewer Qualitative Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Apply qualitative color schemes from ColorBrewer, such as Set2, to your charts. ```javascript // ColorBrewer Qualitative { plugins: { colorschemes: { scheme: 'brewer.Set2' } } } ``` -------------------------------- ### Usage in ES6 as Module Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Import the plugin as an ES6 module. No additional configuration is needed after importing. ```javascript import 'chartjs-plugin-colorschemes'; ``` -------------------------------- ### Using Office Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/colorschemes.md Integrate Microsoft Office color schemes into your charts. Use the 'office.' prefix followed by the scheme name. ```javascript const chart = new Chart(ctx, { type: 'line', data: { /* ... */ }, options: { plugins: { colorschemes: { scheme: 'office.Office6' } } } }); ``` -------------------------------- ### Basic Chart.js Bar Chart with Color Scheme Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/plugin.colorschemes.md Demonstrates how to configure a bar chart to use a predefined color scheme ('brewer.Paired12') via the plugin's options. ```javascript const ctx = document.getElementById('myChart').getContext('2d'); const chart = new Chart(ctx, { type: 'bar', data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [ { label: 'Product A', data: [12, 19, 3, 5] }, { label: 'Product B', data: [8, 15, 10, 8] } ] }, options: { plugins: { colorschemes: { scheme: 'brewer.Paired12' } } } }); ``` -------------------------------- ### Accessing Color Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/main-module.md Demonstrates how to access specific color schemes from the global Chart.colorschemes object after importing the plugin. ```javascript // After importing chartjs-plugin-colorschemes Chart.colorschemes.brewer.Paired12; // Returns: array of 12 hex colors Chart.colorschemes.office.Metro6; // Returns: array of 6 hex colors Chart.colorschemes.tableau.Tableau20; // Returns: array of 20 hex colors ``` -------------------------------- ### Run Tests and Generate Code Coverage Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Execute all tests and generate a code coverage report. This helps in understanding which parts of the codebase are covered by tests. ```bash gulp test --coverage ``` -------------------------------- ### CommonJS Module Usage Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/main-module.md Shows how to use the plugin in a CommonJS environment by requiring the module and accessing the global Chart.colorschemes object. ```javascript // CommonJS require const plugin = require('chartjs-plugin-colorschemes'); // Chart.colorschemes is now available Chart.colorschemes.brewer.Paired12; ``` -------------------------------- ### Accessing Color Schemes Globally Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/README.md Illustrates how to access the color schemes object provided by the plugin globally after it has been imported. ```javascript Chart.colorschemes // Object with brewer, office, tableau schemes ``` -------------------------------- ### Importing All Schemes from a Category (ES6 Modules) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Import all schemes from a category (e.g., brewer) using a namespace import and access them via the namespace. ```javascript import Chart from 'chart.js'; import 'chartjs-plugin-colorschemes'; import * as brewer from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer'; import * as office from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.office'; const chart = new Chart(ctx, { options: { plugins: { colorschemes: { scheme: brewer.YlGn9 } } } }); ``` -------------------------------- ### Using Named Colors (CSS Support) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Attempt to use named colors directly. This may not work reliably and hex codes are recommended. ```javascript const chart = new Chart(ctx, { type: 'bar', data: { /* ... */ }, options: { plugins: { colorschemes: { scheme: ['red', 'blue', 'green', 'yellow'] // May not work - use hex } } } }); ``` -------------------------------- ### Importing Specific Color Schemes in ES6 Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md For smaller bundle sizes, import only the plugin core and specific color schemes you need. ```javascript // import the plugin core import 'chartjs-plugin-colorschemes/src/plugins/plugin.colorschemes'; // import a particular color scheme import { Aspect6 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.office'; // ... options: { plugins: { colorschemes: { scheme: Aspect6 } } } //... ``` -------------------------------- ### Using Direct Color Arrays (ES6) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/colorschemes.md Import a specific color scheme array from the library and pass it directly to the plugin options. This allows for programmatic selection of schemes. ```javascript import { Paired12 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer'; const chart = new Chart(ctx, { type: 'bar', data: { /* ... */ }, options: { plugins: { colorschemes: { scheme: Paired12 } } } }); ``` -------------------------------- ### React Integration with react-chartjs-2 Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Demonstrates integrating the color schemes plugin into a React component using react-chartjs-2. The plugin is imported and its configuration is passed via the options prop. ```jsx import React from 'react'; import { Bar } from 'react-chartjs-2'; import 'chartjs-plugin-colorschemes'; export const BarChart = () => { const data = { labels: ['Jan', 'Feb', 'Mar'], datasets: [ { label: 'Sales', data: [12, 19, 3] } ] }; const options = { plugins: { colorschemes: { scheme: 'brewer.Paired12' } } }; return ; }; ``` -------------------------------- ### Global Configuration (Chart.js 3.x) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Configure a global default color scheme for all charts using Chart.js 3.x syntax for global defaults. This can be overridden per chart. ```javascript // Set global default (Chart.js 3.x syntax) Chart.defaults.plugins.colorschemes = { scheme: 'brewer.Blues9', fillAlpha: 0.5, reverse: false, override: false }; // Now all new charts use this scheme const chart = new Chart(ctx, { type: 'bar', data: { /* ... */ } // No plugins option needed - uses global default }); ``` -------------------------------- ### Using a Direct Array of Colors Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/README.md Provide an array of color hex codes directly to the plugin. This bypasses predefined schemes and uses your specified colors in order. ```javascript options: { plugins: { colorschemes: { scheme: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'] } } } ``` -------------------------------- ### Run Tests and Watch for Changes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Run all tests and monitor project files for changes, automatically re-running tests when modifications are detected. This aids in maintaining test coverage during development. ```bash gulp test --watch ``` -------------------------------- ### Applying a Color Scheme to Chart Options Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html Configure the chart's options to use a specific color scheme from the plugin. The 'brewer.Paired12' scheme is used here. ```javascript options: { plugins: { colorschemes: { scheme: 'brewer.Paired12' } } } ``` -------------------------------- ### Legacy Scheme Name Transformations Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Illustrates how legacy color scheme names are transformed into a new format. This is useful for maintaining backward compatibility with older naming conventions. ```javascript // Legacy scheme string patterns 'brewer.Paired1-12' // → 'brewer.PairedOne12' 'brewer.Paired2-12' // → 'brewer.PairedTwo12' 'brewer.Paired3-12' // → 'brewer.PairedThree12' 'office.Office2007-2010-6' // → 'office.OfficeClassic6' ``` -------------------------------- ### Chart.js Version Detection Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Demonstrates how the plugin detects Chart.js version compatibility by checking the existence of 'Chart.defaults.global', which is present in Chart.js 2.x but not in 3.x. ```javascript // From line 17 of plugin.colorschemes.js const pluginBase = Chart.defaults.global || Chart.defaults; // Chart.js 2.x has Chart.defaults.global // Chart.js 3.x has only Chart.defaults ``` -------------------------------- ### Internal Color Storage Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Shows how the plugin stores original dataset colors in a private expando property '$colorschemes' before applying new colors, preserving them for later restoration. ```javascript const EXPANDO_KEY = '$colorschemes'; dataset.$colorschemes = { backgroundColor: original_value, borderColor: original_value, pointBackgroundColor: original_value, pointBorderColor: original_value } ``` -------------------------------- ### Using Brewer Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/colorschemes.md Apply a Brewer color scheme to your chart by specifying its name within the plugin options. Ensure the scheme name is correctly formatted. ```javascript const chart = new Chart(ctx, { type: 'bar', data: { /* ... */ }, options: { plugins: { colorschemes: { scheme: 'brewer.YlGn9' } } } }); ``` -------------------------------- ### Define Custom Color Scheme from Scratch Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Create a completely new color scheme by providing an array of color values directly to the `scheme` option. This allows for full control over the colors used in your charts without relying on predefined schemes. ```javascript var myColors = ['red', 'green', 'blue', 'orange', 'black', 'yellow']; // ... options: { plugins: { colorschemes: { scheme: myColors } } } //... ``` -------------------------------- ### ColorSchemesPlugin Object Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/plugin.colorschemes.md Illustrates the basic structure of the ColorSchemesPlugin object, including its ID and core lifecycle methods. ```javascript ColorSchemesPlugin = { id: 'colorschemes', beforeUpdate: function(chart, args, options), afterUpdate: function(chart), beforeEvent: function(chart, event, options), afterEvent: function(chart) } ``` -------------------------------- ### Initialize Google Analytics Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html This snippet initializes Google Analytics tracking for the page. It should be included in your HTML to track user interactions. ```javascript (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-39988758-2', 'auto'); ga('send', 'pageview'); ``` -------------------------------- ### Using a Specific Color Scheme Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/README.md Apply a predefined color scheme to your chart. Ensure the 'colorschemes' plugin is configured within the chart options. ```javascript options: { plugins: { colorschemes: { scheme: 'brewer.Blues9' } } } ``` -------------------------------- ### Accessing Color Schemes Globally Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/colorschemes.md Import the plugin and then access color schemes directly from the Chart.colorschemes global object. This method is straightforward but may not be ideal for tree-shaking. ```javascript // After importing the plugin import 'chartjs-plugin-colorschemes'; // Or with CommonJS require('chartjs-plugin-colorschemes'); // Access via global Chart.colorschemes.brewer.Paired12; // Array of colors Chart.colorschemes.office.Aspect6; // Array of colors Chart.colorschemes.tableau.Tableau10; // Array of colors ``` -------------------------------- ### Importing Color Schemes with ES6 Modules Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/colorschemes.md For better tree-shaking and bundle size control, import specific color schemes directly from their respective modules. This is the recommended approach for modern JavaScript projects. ```javascript import { Paired12 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.brewer'; import { Aspect6 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.office'; import { Tableau10 } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.tableau'; ``` -------------------------------- ### Chart Instance Extension Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Illustrates the structure of the global `Chart.colorschemes` property, which provides access to predefined color schemes categorized by source (e.g., brewer, office, tableau). ```typescript { brewer: { [schemeName: string]: string[] }, office: { [schemeName: string]: string[] }, tableau: { [schemeName: string]: string[] } } ``` -------------------------------- ### Basic Usage Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/README.md Apply a predefined color scheme to your Chart.js chart by specifying the scheme in the plugin options. ```javascript options: { plugins: { colorschemes: { scheme: 'brewer.Paired12' } } } ``` -------------------------------- ### Accessing Predefined Color Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/types.md Shows how to access specific color schemes directly from the `Chart.colorschemes` object. Useful for referencing schemes programmatically. ```javascript Chart.colorschemes.brewer.Paired12; // string[] Chart.colorschemes.office.Aspect6; // string[] Chart.colorschemes.tableau.Tableau10; // string[] ``` -------------------------------- ### Adjusting Fill Transparency (Heavy) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Set a heavy transparency for fills, making them 20% opaque. ```javascript // Heavy transparency (20% opaque) { plugins: { colorschemes: { scheme: 'brewer.YlGn9', fillAlpha: 0.2 } } } ``` -------------------------------- ### Internal Helper Method Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/README.md The 'getScheme' internal helper method resolves a scheme name or an array of colors into a usable color array for the plugin. ```javascript getScheme(scheme: string | string[]): string[] | undefined // Resolves scheme name or array to color array ``` -------------------------------- ### Using ColorBrewer Sequential Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Apply sequential color schemes from ColorBrewer, such as Blues9, to your charts. ```javascript // ColorBrewer Sequential { plugins: { colorschemes: { scheme: 'brewer.Blues9' } } } ``` -------------------------------- ### Color Storage and Restoration Lifecycle (beforeUpdate) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md During the 'beforeUpdate' hook, the plugin saves the original values of dataset color properties (like backgroundColor) into the internal '$colorschemes' expando property before applying the new scheme colors. ```javascript // Store what was there before dataset.$colorschemes = {}; if (dataset.backgroundColor !== undefined) { dataset.$colorschemes.backgroundColor = dataset.backgroundColor; } // ... same for other properties // Apply scheme color dataset.backgroundColor = schemeColor; ``` -------------------------------- ### Scheme Naming Pattern Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/quick-reference.md Explains the naming convention for color schemes, which follows a {source}.{SchemeNameNumber} pattern. ```plaintext {source}.{SchemeNameNumber} ``` -------------------------------- ### Apply Scheme to Pie, Doughnut, PolarArea Datasets Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md For pie, doughnut, and polar area charts, this logic iterates through each dataset and assigns a background color from the scheme, cycling through the scheme colors for each data point. ```javascript For each dataset: dataset.backgroundColor = [ scheme[0 % scheme.length], scheme[1 % scheme.length], scheme[2 % scheme.length], ...for each data point ] ``` -------------------------------- ### Adjusting Fill Transparency (Full Opaque) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Set fill transparency to 1.0 for fully opaque fills. ```javascript // Fully opaque { plugins: { colorschemes: { scheme: 'brewer.YlGn9', fillAlpha: 1.0 } } } ``` -------------------------------- ### Line Chart with Themed Legend, Tooltips, and Color Scheme Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html Creates a line chart with a specific color scheme, custom legend styling, tooltips, and axis colors for a themed appearance. ```javascript var ctx3 = document.getElementById('chart3').getContext('2d'); var chart3 = new Chart(ctx3, { type: 'line', data: data, options: { aspectRatio: 1.75, layout: { padding: 14 }, legend: { labels: { fontColor: '#ccc', generateLabels: generateLabels, usePointStyle: true } }, tooltips: { backgroundColor: 'rgba(255, 255, 255, 0.8)', titleFontColor: '#000', bodyFontColor: '#000' }, scales: { xAxes: [{ gridLines: { color: 'rgba(255, 255, 255, 0.2)', zeroLineColor: 'rgba(255, 255, 255, 0.5)' }, ticks: { fontColor: '#ccc' } }], yAxes: [{ gridLines: { color: 'rgba(255, 255, 255, 0.2)', zeroLineColor: 'rgba(255, 255, 255, 0.5)' }, ticks: { fontColor: '#ccc' } }] }, plugins: plugginOpts } }); ``` -------------------------------- ### Dynamically Generating Scheme Options Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html This JavaScript code snippet shows how to iterate through available color schemes to dynamically generate HTML options for a select element. ```javascript var colorSchemes = Chart.colorschemes; document.getElementById('scheme').innerHTML = Object.keys(colorSchemes).map(function(category) { return Object.keys(colorSchemes[category]).map(function(scheme) { var schemeName = category + '.' + scheme; ``` -------------------------------- ### Configure fillAlpha: Fully Opaque Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/configuration.md Set the fill transparency to 1.0, making the fill colors fully opaque. This is useful when maximum color intensity is desired. ```javascript options: { plugins: { colorschemes: { fillAlpha: 1.0 } } } ``` -------------------------------- ### Adjusting Fill Transparency (Moderate) Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/examples.md Set a moderate transparency for fills, making them 50% opaque (default). ```javascript // Moderate transparency (50% opaque) - Default { plugins: { colorschemes: { scheme: 'brewer.YlGn9', fillAlpha: 0.5 } } } ``` -------------------------------- ### Color Application for Line, Radar, Scatter Charts Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Details how colors are applied to datasets for line, radar, and scatter charts. It cycles through the scheme and sets background and border colors with specified opacity. ```text For each dataset: color = scheme[datasetIndex % scheme.length] dataset.backgroundColor = rgba(color, fillAlpha) dataset.borderColor = color (hex, no transparency) dataset.pointBackgroundColor = rgba(color, fillAlpha) dataset.pointBorderColor = color (hex, no transparency) ``` -------------------------------- ### Include Chart.js and Plugin Scripts Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html Include the Chart.js library and the chartjs-plugin-colorschemes.js script in your HTML page before creating any charts. ```html ``` -------------------------------- ### Chart.colorschemes Global Object Structure Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/main-module.md Illustrates the structure of the global Chart.colorschemes object, which organizes available color schemes by category (brewer, office, tableau). ```javascript Chart.colorschemes = { brewer: { // ~100+ named schemes YlGn3: [...], YlGn4: [...], Paired12: [...], // etc. }, office: { // ~100+ named schemes Adjacency6: [...], Aspect6: [...], Office6: [...], // etc. }, tableau: { // ~100+ named schemes Tableau10: [...], Tableau20: [...], ColorBlind10: [...], // etc. } } ``` -------------------------------- ### Color Application for Bar Charts Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/architecture.md Explains the color application strategy for bar charts. It assigns colors from the scheme to the dataset's background and border properties. ```text For each dataset: color = scheme[datasetIndex % scheme.length] dataset.backgroundColor = rgba(color, fillAlpha) dataset.borderColor = color (hex, no transparency) ``` -------------------------------- ### Bar Chart with Dynamic Color Scheme Updates Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/docs/index.html Creates a bar chart and dynamically updates its color scheme and data every 3 seconds using a predefined list of schemes. ```javascript var ctx1 = document.getElementById('chart1').getContext('2d'); var chart1 = new Chart(ctx1, { type: 'bar', data: { labels: Chart.colorschemes.brewer['Paired12'], datasets: [{ data: Chart.colorschemes.brewer['Paired12'].map(function() { return Math.random() + 1; }), backgroundColor: Chart.colorschemes.brewer['Paired12'] }] }, options: { aspectRatio: 4, elements: { rectangle: { borderWidth: 1 } }, legend: { display: false }, tooltips: { enabled: false }, hover: { mode: null }, scales: { xAxes: [{ display: false }], yAxes: [{ display: false, ticks: { min: 0, max: 2.5 } }] } } }); var count = 0; setInterval(function() { var scheme = ['Paired12', 'YlGnBu9', 'PiYG11', 'RdPu9', 'Spectral11', 'Oranges9', 'BrBG11'][++count % 7]; var colors = Chart.colorschemes.brewer[scheme]; chart1.data.labels = colors; chart1.data.datasets[0].data = colors.map(function() { return Math.random() + 1; }); chart1.data.datasets[0].backgroundColor = colors; chart1.update(); }, 3000); ``` -------------------------------- ### Exported Plugin Object and Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/README.md Shows the default export for the plugin object and how schemes are re-exported under the Chart.colorschemes namespace. ```javascript // Default export export default ColorSchemesPlugin // Plugin object // Re-exported via Chart.colorschemes Chart.colorschemes = { brewer: { YlGn3, YlGn4, ..., SetThree12 }, // ColorBrewer schemes office: { Adjacency6, Advantage6, ..., YellowOrange6 }, // Office schemes tableau: { Tableau10, Tableau20, ..., ClassicGreen7 } // Tableau schemes } ``` -------------------------------- ### Using Tableau Schemes Source: https://github.com/nagix/chartjs-plugin-colorschemes/blob/master/_autodocs/api-reference/colorschemes.md Apply Tableau color schemes to your charts. Prefix the scheme name with 'tableau.' for correct identification. ```javascript const chart = new Chart(ctx, { type: 'doughnut', data: { /* ... */ }, options: { plugins: { colorschemes: { scheme: 'tableau.Tableau10' } } } }); ```