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.

use chart.js on a page that was loaded by ajax

I have gotten a line chart to work on a regular page. I have another page where I am using the same code, except the page is called via ajax. The chart is not appearing on the page that is called by ajax. Here is my code:
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Line(lineChartData, {
responsive: true
});
</script>
How do I get the chart to appear on a page loaded by ajax?

You DOM may not be ready as soon as your AJAX has completed. Try wrapping the Chart initialization in something that checks if the DOM is ready, like so
var interval = setInterval(function(){
var canvas = document.getElementById("canvas");
if (canvas) {
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Line(lineChartData, {
responsive: true
});
clearInterval(interval)
}
}, 100)
Also, you might want to ensure that your ajaxComplete function is actually getting called.

0 line style of Chart.js line chart

I have a line chart with positive and negative values written in Chart.js.
I'm trying to give the 0 line parallel to the X Axis a colour without affecting other chart elements.
My code:
line_chart_options: {
responsive: false,
maintainAspectRatio: true,
multiTooltipTemplate: "<%= datasetLabel %>: $<%= addThousandCommas(value) %>",
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"> </span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
},
I tried:
scaleLineColor: "rgba(0,0,0,1)",
But that just colourised the axis, not the 0 line.
How can I colourise the 0 line?

Line Colors are handled by setting the fill colors in the datasets you feed to the chart. The most notable would be fillColor, strokeColor, and pointColor.
Here is a sample line chart object that colors the 2 lines/series in the chart:
var obj= {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : 1,2,3,4,5,6,7]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [1,2,3,4,5,6,7]
}
]
};

Is it possible to make chartjs charts scrollable?

I'm trying to make charts of my analytics data using chart.js. Here's a JSFiddle example.
Currently it is with default sample data. What I want to do is something like this, with infinite scrolling from left to right:
How can I implement that behavior here?
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});

Chart.js came up with their official plugin to this

Chart.js tooltip not showing

I am attempting to add tooltips to my chart, the options are correctly loading, however tooltips are not showing, any ideas?
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(139, 157, 195, 1)",
strokeColor : "#4c66a4",
pointColor : "#fff",
pointStrokeColor : "#3b5998",
pointHighlightFill: "#fff",
data : [{{implode(',', $fanCounts)}}]
}
]
}
var options = {
showTooltips: true,
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
tooltipFillColor: "rgba(0,0,0,0.8)"
}
var myLine = new Chart(document.getElementById("fancanvas").getContext("2d")).Line(lineChartData, options);
</script>
I have also changed the chart.js global config to enable tooltips for line charts.

For anyone having problems with this using Chartjs v3, you need to make sure you have registered the Tooltip plugin:
import { Chart, Tooltip } from 'chart.js'
Chart.register([Tooltip])

var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
showTooltips: true,
multiTooltipTemplate: "<%= value %>",
});
use this (global settings)

You just need to put background with a single value:
datasets: [{
label: "# of beauty womens",
data: [12, 5, 3],
backgroundColor: "#FC940B",
fill: false,
borderColor: "#FC940B"
}]
Hugs...