We Keep Coding

Chart.js - Override inherited colors when coloring graphs

I'm creating graphs with ChartJS, but they seem to inherit the default colors of some parent element. The graphs look like this:
I am dynamically creating the charts, depending on selections from the user. The ChartJS chart takes in an array of either primitives, or objects to use as the chart data. I'm using the following function to create the chart objects, and then using an array of these objects as the parameter for ChartJS:
function getChartDataObject(data){
var title = data['metadata']['title'];
var color = random_rgba();
console.log(`Color: ${color}`);
var dataObject = {
label: title,
data: data['scaled_interval'],
color: color,
fill: false,
lineTension: 0,
radius: 1,
}
return dataObject;
}
Then I create the master chart with this function:
function createIntervalChart(intervalDataObjects, datetimeInterval) {
const cnvs = document.createElement('canvas');
const ctx = $(cnvs);
var data = {
labels: datetimeInterval,
datasets: intervalDataObjects,
}
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Projected Load Profiles",
fontSize: 18,
fontColor: "#111",
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
elements: {
point: {
radius: 0
}
},
plugins: {
zoom: {
zoom: {
wheel: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'xy',
}
},
title: {
text: "Estimated Load Profiles"
}
}
};
var chart = new Chart(ctx, {
type: "line",
data: data,
options: options
});
return cnvs;
}
When I check the console, I see distinct colors created by the random_rgb() function, but they all turn out grey.
Color: rgba(215,231,183,0.6)
Color: rgba(253,61,199,0.1)
Color: rgba(27,15,88,0.1)
Does anyone know how to create a ChartJS chart with custom colors? Or how to override inherited styling for these charts? Thank you

color is not a valid dataset property for a line chart. Use borderColor and optionally also backgroundColor (will be used for drawing the legend label box).
function getChartDataObject(data){
var title = data['metadata']['title'];
var color = random_rgba();
console.log(`Color: ${color}`);
var dataObject = {
label: title,
data: data['scaled_interval'],
borderColor: color, // <- to be changed
fill: false,
lineTension: 0,
radius: 1,
}
return dataObject;
}
For further information, please consult Dataset Properties from the Chart.js documentation.

Chart.js not showing dynamically populated data

I was having some trouble when trying to dynamically populate bar chart in chart.js. I have two arrays, one for label, one for its price and both of them are already populated with the sorted data from firebase. Here is my code:
var ctx = document.getElementById('brandChart').getContext("2d");
var data = {
labels: [],
datasets: [{
data: [],
backgroundColor: [
"#424242",
]
}]
};
var options = {
layout: {
padding: {
top: 5
}
},
responsive: true,
legend: {
display: true,
position: 'bottom',
// disable legend onclick remove slice
onClick: null
},
animation: {
animateScale: true,
animateRotate: true
},
};
var opt = {
type: "horizontalBar",
data: data,
options: options
};
if (brandChart) brandChart.destroy();
brandChart = new Chart(ctx, opt);
// dynamically populate chart
for(var i = 0; i < labelData.length; i++){
brandChart.config.data.labels.push(labelData[i]);
}
for(var i = 0; i < priceData.length; i++){
brandChart.config.data.datasets[0].data.push(priceData[i]);
}
brandChart.update();
I managed to show all of them in bar chart, however, the result as such:
It is kind of squeeze between each labels if there are too many categories. Also, only the first bar has the color & the legends shown undefined. Any ideas how to solve these?

ɪꜱꜱᴜᴇ #1 - ꜱᴏʟᴜᴛɪᴏɴ
Add a callback for y-axis ticks, in your chart options :
options: {
scales: {
yAxes: [{
ticks: {
callback: function(t, i) {
if (!(i % 2)) return t;
}
}
}]
},
...
}
this will only show every other label on y-axis.
ɪꜱꜱᴜᴇ #2 - ꜱᴏʟᴜᴛɪᴏɴ
This is because, you have only one color in your backgroundColor array. If you want different color for each bar, then you need to populate this array with multiple color values.
Edit: as it seems form your updated question, you already kind of got the idea.
ɪꜱꜱᴜᴇ #3 - ꜱᴏʟᴜᴛɪᴏɴ
Define the label property for your dataset , like so :
datasets: [{
label: 'Legend Title', //<- define this
data: [],
backgroundColor: ["#424242", ]
}]

Bar graph colors based on value in c3.js

I have the following bar chart in c3.js (here's a fiddle):
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: '#FF0000'
},
},
axis: {
x: {
type: 'category'
}
},
legend: {
show: false
}
});
This sets all the bars to red. What I would like is the colors of the bars to be this gradient from FF0000 to 10FF00, which I believe is just in increments of adding 4096 to the decimal value of the color.
I'd like the gradient to start at 50 and end at 100 (that is, anything green and below would be solid red FF0000, and 100 would be green 10FF00).
I was trying to follow this example to set the color of a data point on a c3.js graph based on its value. In the example, the value of data3 is darkened as its value goes up. I've been trying to modify the color: function (color, d), but I can't seem to get it to do anything that I want it to.
Any help would be appreciated. Thanks!

I'm not sure what you did inside color: function, but it is the correct way to set it up. Regarding your desired gradient, it cannot be achieved by just increasing its hex value because going from yellow to green requires decreasing the value. The following example goes from red to yellow:
var chart = c3.generate({
data: {
x: 'Letter',
columns:
[
['Letter', 'A','B','C','D'],
['value', 25,50,75,100]
],
type: 'bar',
colors: {
value: function(d) {
return '#'+(0xff0000+(d.value-25)*256*3).toString(16);
}
},
},
axis: {
x: {
type: 'category
}
},
legend: {
show: false
}
});
fiddle

you can adding in your css like a
.c3-bar-0 {
fill:rgb(204, 0, 102)!important;
}
.c3-bar-1 {
fill:rgb(51, 153, 255)!important;
}
.c3-bar-2 {
fill: rgb(0, 255, 204)!important;
}

Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data

I have created a donut chart. I want to display the tooltip always in the donut chart along with the legends.
I have followed this stack overflow question.
Question which explain the tooltip to be shown always
I have followed the answer and created a doughnut chart and tried to show the tooltip always.
it works fine, however it is not showing all the label, esp. when you have multiple data with 0 value.It just overwrite the label.
my label and values are
"Red" -0,
"Green" -0 &
"Yellow"-100
here is shows tooltip for "Yellow-100" and "Green-0", i think it is overwriting on top of "Red-0". How to show tooltip for "Red-0" and "Green-0" both together.
html:
<canvas id="canvas"></canvas>
Javascript:
var ctx = document.getElementById("canvas").getContext("2d");
var data = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [
{
data: [0, 0, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
})
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
showAllTooltips: true
}
});
here is the link for jsfiddle.
doughnut chart 0 data tooltip is not shown for all
Chart Version : 2.1.0
please help.

you could use the tooltip callbacks in order to check which data is inside and place it on a different position.
For example you could return the red label in the title and the green one in the footer:
callbacks: {
title: function(tooltipItems, data) {
return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
},
label: function(tooltipItem, data) {
//remove body, show data only in title
},
footer: function(tooltipItems, data) {
return (HERE YOUR CONDITION FOR FILTERING GREEN OR RED);
}
}

Change color of Multibar chart in Django

I am using Highcharts to represent some data and I've got stuck at this point:
I have the following chart:
How can I change the colors of each point of a bar ? ( e.g: instead of orange to set up 'red' ). Also, can I modify the color depending on the value of the point? (e.g: if the value is > 2.5k to transform that into another color).
My class looks like this:
class _TimeSeriesChart(_Chart):
def get_options(self, series):
return {
'title': {
'text': self.title,
},
'xAxis': {
'type': 'datetime',
},
'yAxis': {
'min': 0,
},
'plotOptions': {
'series': {
'animation': True,
},
'column': {
'stacking': 'normal',
#'colorByPoint': True,
},
},
'credits': {
'enabled': False
},
'series': series,
}
If colorByPoint is uncommented, I'll have each bar transformed in only one color.

Colors can be set per point.
series: [{
data: [{y: 1, color: '#ff0072'},
...
Example: http://jsfiddle.net/sbphxhfs/
Other option is to set negativeColor and threshold
series: [{
negativeColor: 'red',
threshold: 3,
...
Example: http://jsfiddle.net/sbphxhfs/1/
Colors can be also set for series (using color setting), or whole chart (using colors array).
Example: http://jsfiddle.net/sbphxhfs/2/