We Keep Coding

Is there a way to add html markup to target each column individually in Chartjs/Canvasjs?

I'm hoping I can add markup to each dataset individually so that I can change the colors with css.
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["(1)","(2)","(3)","(4)","(5)"],
datasets: [
{
label: "Food Chart",
fillColor: "#000066",
strokeColor: "transparent",
pointColor: "red",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: calcChart(),
}
]
}
var options = {
scaleShowHorizontalLines: true,
barValueSpacing : 5,
scaleBeginAtZero : true,
barValueSpacing : 25
}
var myBarChart = new Chart(ctx).Bar(data,options);

Since Chart.js and Canvasjs both use the canvas element to draw the charts you can't interact with the elements using CSS.
If you want to use custom CSS to the chart elements you will need to use a SVG library like highcharts.

One of the bar in horizontal barchart of chart.js (ChartNew.js) does not grow horizontally though it has more than 60% value

No width for the bar in horizontal bar chart:
In the above chart the first bar is not displaying the values.
Though the value of it is more than 60% the width of the bar never grows.
Thanks in advance.
Below is the code i am using.
$('#prodSumChartContainer .chartArea').empty();
$('#prodSumChartContainer #prodSumChartTemplate').clone(true, true).attr('id', 'prodSumChart').removeAttr('hidden').appendTo('#prodSumChartContainer .chartArea');
var prodSumData = {
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [prodSummActual],
title: "Actual"
},
{
fillColor: "rgba(151,187,205, 0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [prodSummExpected],
title: "Expected"
},
{
fillColor: "rgba(0, 20, 137,1)",
strokeColor: "rgba(0, 20, 137,0.5)",
data: [prodSummTarget],
title: "Target"
}
]
}
var prodSumOpt = {
animationSteps: 30,
inGraphDataShow: true,
annotateDisplay: true,
maxBarWidth: 30,
fullWidthGraph: true,
legend: false,
inGraphDataShow: true,
scaleShowGridLines: false,
xAxisBottom: false,
xAxisTop: false,
yAxisLeft: false,
yAxisRight: false,
scaleLineColor: "rgba(0,0,0,0)",
animationEasing: "linear",
barDatasetSpacing: 15,
barBorderRadius: 5,
annotateLabel: "<%=v1 +' - '+ v3%> MT",
inGraphDataTmpl: "<%=(100 * v3 / prodSummTarget).toFixed(2) %> %",
inGraphDataFontFamily: "'Arial Rounded MT'",
inGraphDataFontSize: 11,
inGraphDataFontColor: "#8d8888",
responsive: false,
}
prodSummaryGauge = new Chart(document.getElementById("prodSumChart").getContext("2d")).HorizontalBar(prodSumData, prodSumOpt);

Is it possible to add individual labels to Chart.JS bars?

I have a fully functional Chart.JS Barchart which loads as intended, however I would like to add the username to each bar which is associated to them so administrators (who can see all entries) can distinguish between them.
function BarChart(data) {
var barChartData = {
labels: data.Month,
datasets: [
{
label: 'Weight (kg)',
fillColor: "rgba(220,220,220,0.5)",
backgroundColor: "rgba(46, 44, 211, 0.7)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: data.Weight
},
{
label: 'Steps',
fillColor: "rgba(0,0,0,0.5)",
backgroundColor: "rgba(215, 44, 44, 0.7)",
highlightFill: "rgba(0,0,0,0.5)",
highlightStroke: "rgba(0,0,0,0.5)",
data: data.Steps
}
]
}
var ctx = document.getElementById("barchart").getContext("2d");
window.myBar =new Chart(ctx, {
type: 'bar',
data: barChartData,
options: { responsive: true }
});
I have successfully passed through the Usernames and they can be called by using data.User, however when I append this to the Steps or Weight label, I end up with "Steps for: admin,admin,admin" (since I have three entries, all from admin).
Is it possible to have it so each bar has the username it belongs to?

Maybe not quite what you asked for, but you could add it to the tooltip.
options: {
tooltips:{
callbacks: {
afterLabel: function(e){return "added By:" +data.User[e.datasetIndex][e.index]}
}
}
}
https://jsfiddle.net/r71no58a/7/

Cleart Chart data upon ajax call [duplicate]

This question already has answers here:
chart.js load totally new data
(23 answers)
Closed 6 years ago.
I am loading a chart using Chart.js with hard coded data when the page starts. Following that upon a button click, I am making an ajax query; get external data from database and want to load that data into the chart.
I have the correct data retrieved and stored as an array. I want to clear the current chart data and input this new array as new data for the chart.
For starters I would need to empty the old data and tried, clear() and destroy() and neither of them works. The chart just keeps reloading with the old data. The old chart seems removed for a split second only to see it reappear. How can I resolve this?
$( document ).ready(function() {
var lineData = {
labels: ["Lap 1", "Lap 2", "Lap 3", "Lap 4", "Lap 5"],
datasets: [{
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(63,169,245,1)",
pointColor: "rgba(63,169,245,1)",
pointStrokeColor: "#fff",
data: [10, 20, 30, 40, 55] // need to swap this with race1Data array
}, {
fillColor: "rgba(255,255,255,0)",
strokeColor: "rgba(102,45,145,1)",
pointColor: "rgba(102,45,145,1)",
pointStrokeColor: "#fff",
data: [97, 87, 55, 72, 66]
}]
}
var lineOptions = {
responsive: true,
animation: true,
pointDot: true,
scaleOverride : false,
scaleShowGridLines : false,
scaleShowLabels : true,
scaleSteps : 4,
scaleStepWidth : 25,
scaleStartValue : null
};
//Create Line chart
var ctx = document.getElementById("lineChart").getContext("2d");
myNewChart = new Chart(ctx).Line(lineData, lineOptions);
$("#form").submit(function(e) {
var race1 = $( "#racename1" ).val();
var race2 = $( "#racename2" ).val();
var race1Data = [];
$.post("MyServlet", {raceName1 : race1, raceName2 : race2}, function(responseText) {
race1Data = responseText; // <-- correct data
myNewChart.destroy(); // <--doesn't work
});
});
});

I didn't find any better solution but to iterate through the lineData and remove all the data by calling removeData()
Here's the example created for the code provided:
https://jsfiddle.net/4e3u5L89/2/

Chart.JS Global Options

I seem to be getting errors in Chart.JS for some reason. It's related to the global options that you can set.
The is as follows
Here is my code
var chart1 = document.getElementById("chart1").getContext("2d"),
chart2 = document.getElementById("chart2").getContext("2d"),
chart3 = document.getElementById("chart3").getContext("2d"),
datatest1 = document.getElementById("datatest1").value,
datatest2 = document.getElementById("datatest2").value,
color_bg = "#00b5e4",
color_fg = "#007799",
data1 = [{ value: Math.floor(Math.random() * 100), color: color_bg}, { value: Math.floor(Math.random() * 100), color: color_fg}],
data2 = [{ value: datatest1, color: color_bg}, { value: datatest2, color: color_fg}],
data3 = {
labels: ["Jan", "Feb", "Mar"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
//
// #Global Chart Settings
var options = Chart.defaults.global = {
animation: true,
animationSteps: 160,
animationEasing: "easeOutQuart",
responsive: true,
showTooltips: true,
segmentShowStroke: false,
maintainAspectRatio: true,
percentageInnerCutout: 70,
onAnimationComplete: function () {
"use strict";
//console.log("Animation Done");
}
};
$(document).ready(function () {
"use strict";
//
// #Initialise and bind to data and global options
new Chart(chart1).Doughnut(data1, options);
new Chart(chart2).Doughnut(data2, options);
new Chart(chart3).Radar(data3);
});
If you remove the options from the charts they work, if you add options and set them globally as per their documentation you get the error I've mentioned. Am I missing something obvious or is there an issue here?

When you do
var options = Chart.defaults.global = {
...
you are setting the COMPLETE Chart global default to your object. Unless you have ALL the Chart global options in your object, this will cause many of the options to end up as undefined. The right way to set the global options is like so
Chart.defaults.global.animation = true;
Chart.defaults.global.animationSteps = 160;
...
i.e. change the value of the individual properties in global instead of setting the entire global property.

Global options for charts can be set like this:
Chart.defaults.global = {
//Set options
So you can just delete the
var = options
This sets default values for all of your future charts
Please refer to the documentation for further instructions: http://www.chartjs.org/docs/
If you want to specify options for each charts do this:
new Chart(ctx).Line(data, {
// options here
});

First it must be understood that the main property to be tweaked so as to handle the animations is "Chart.defaults.global.animation".
Then keeping this as the base, you will need to adjust the sub-properties as mentioned above and in the documentation page.
So, You can change as follows:
Chart.defaults.global.animation.animationSteps=160;
Chart.defaults.global.animation.duration=5000;
...
For positioning of these lines of code, follow the first answer by potatopeelings.
I have tried changing in this way and it works !!!