Chartjs-Where are the default colors for charts in Chart.js defined when using it with ChartKick?

by

1👍

✅

The colors are defined by Chartkick rather than Chart.js. Source

let defaultColors = [
  "#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6",
  "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11",
  "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#651067"
];

0👍

I don’t have experience with Chartkick, but here’s a general JS solution for Chartjs:

const x = [1,2,3,4,5]
let chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: x,
        datasets: range(20).map(i => ({
            data: x,
        }))
    },
})

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
    const hex = (x*1).toString(16)
    return hex.length === 1 ? '0' + hex : hex
}).join('')

let chartColors = chart.config._config.data.datasets.map(d => rgbToHex(...d.borderColor.slice(4,-1).split(", ")))
chartColors = Array.from(new Set(chartColors))

console.log(chartColors)

// ['#36a2eb', '#ff6384', '#ff9f40', '#ffcd56', '#4bc0c0', '#9966ff', '#c9cbcf']

Leave a comment