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.

Want to change chartjs bar width and on click of bar stroke values from another div should get change

I am using chartjs script to display a bar chart. Displayed the views and visitors bars and overlapped it on one another. Now I want to reduce the width of the resultant bar and on the clickEvent of the bar stroke should another div get changed which is having proper values from a database. I have gone through all queries related with chartjs on StackOverflow, but failed to implement it.
This is what I have tried:
<canvas id="barChart" style="height:5px; width:30px;" ></canvas>
script=>
/* javascript to show bar chart for weekly analysis */
$(function () {
var areaChartData = {
labels : ['Nov-15', 'Nov-22', 'Nov-29', 'Dec-06','Dec-13', 'Dec-19']
datasets: [
{
label : 'Total View Count',
fillColor : '#0087be',
strokeColor : '#0087be',
pointColor : '#0087be',
pointStrokeColor : '#0087be',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
barPercentage : 0.5,
data : [1, 3, 2,2, 7,2,]
},
{
label : 'Total Visitors Count',
fillColor : 'rgba(60,141,188,0.9)',
strokeColor :'rgba(60,141,188,0.8)',
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke : 'rgba(60,141,188,1)',
barPercentage : 0.5,
data : [1, 2, 1, 2, 4, 2]
},
],
}
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChart = new Chart(barChartCanvas)
var barChartData = areaChartData
barChartData.datasets[1].fillColor = '#004069'
barChartData.datasets[1].strokeColor = '#004069'
barChartData.datasets[1].pointColor = '#004069'
var barChartOptions = {
options: {
scales: {
xAxes: [{
barPercentage: 1,
categoryPercentage: 0.5 / 10 * barChartData.datasets[0].data.length }],
yAxes: [{
ticks: {
beginAtZero:true
}
}],
}
},
//Boolean - Whether the scale should start at
zero, or an order of magnitude down from the lowest value
barStrokeWidth : 2,
barValueSpacing : 15,
barDatasetSpacing : -175,
datasetStroke : true,
barDatasetWidth : -10,
dataPointMaxWidth : 20,
responsive : true,
maintainAspectRatio : true,
}
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions)
});
[bar image shown in picture want to reduce bar stroke width. Two
bars are having different blue color shed][1]

Not able to show data on Chart.js

I'm trying to create a very simple chart using chart.js. But I don't get why it's not working. Here is what I tried so far. I'm using the 2.4 version. Thanks
Fiddle: https://jsfiddle.net/8zb4nr44/
Html
<div id="wasted-budget-chart">
<canvas width="500" height="150" id="wasted-budget-chart-canvas"/>
</div>
Js:
var options = {
responsive: true,
maintainAspectRatio: false,
datasetStrokeWidth : 3,
pointDotStrokeWidth : 4,
tooltipFillColor: "rgba(0,0,0,0.8)",
tooltipFontStyle: "bold",
};
var ctx = document.getElementById('wasted-budget-chart-canvas').getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(151,187,205,0.7)');
gradient.addColorStop(1, 'rgba(151,187,205,0)');
var data = {
type:'line',
labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
datasets: [
{
fillColor : gradient, // Put the gradient here as a fill color
strokeColor : "#ff6c23",
pointColor : "#fff",
pointStrokeColor : "#ff6c23",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ff6c23",
data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
}]
,
options: options
};
new Chart(ctx,data);

If you are going to pass the data in as one big object, you need to nest "data" one more time inside it, like this:
var data = {
type:'line',
data: { // add this here, and its closing brace of course
labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
datasets: [
{
fillColor : gradient, // Put the gradient here as a fill color
strokeColor : "#ff6c23",
pointColor : "#fff",
pointStrokeColor : "#ff6c23",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ff6c23",
data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
}]
},
options: options
};

Chart.js remove border from x/y Axis

I'm using Chart.js for one of my projects. In which I want to remove border from x/y axis. Any help would be really helpful. Refer Attached Image
Please not that I'm not referring to the GridLines(Which I already turned off using scaleShowGridLines : false)
Chart Script
var topVideos = {
labels : ["","","","",""],
datasets : [
{
fillColor : "rgba(2,137,203,1)",
strokeColor : "rgba(220,220,220,0)",
highlightFill: "rgba(2,137,203,0.8)",
highlightStroke: "rgba(220,220,220,0)",
data : [90000, 200000, 70000, 100000, 180000 ]
}
]
}
window.onload = function(){
var ctx = $("#topvideos").get(0).getContext("2d");
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
responsive : true,
barShowStroke: false,
scaleShowGridLines : false,
barValueSpacing : 7,
barDatasetSpacing : 30,
});
}
Thanks in Advance.

I think you are using a fork of Chart.js and not the actual chart.js (since the current stable version doesn't have horizontal bars)
In Chart.js, you can set the scale line color to a transparent value, like so
window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
scaleLineColor: "rgba(0,0,0,0)",
...
If the fork is from a version after this, the same options should work in your forked library as well.

options : {
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
}
}]
}
};

In Chart.js 3.5.1 there is a drawBorder property which accepts boolean value. If true, the border is drawn at the edge between the axis and the chart area.
options: {
scales: {
x: {
...
grid: {
drawBorder: false,
},
},
y: {
...
grid: {
drawBorder: false,
},
},
},
}

Remove x-axis label/text in chart.js

How do I hide the x-axis label/text that is displayed in chart.js ?
Setting scaleShowLabels:false only removes the y-axis labels.
<script>
var options = {
scaleFontColor: "#fa0",
datasetStrokeWidth: 1,
scaleShowLabels : false,
animation : false,
bezierCurve : true,
scaleStartValue: 0,
};
var lineChartData = {
labels : ["1","2","3","4","5","6","7"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [1,3,0,0,6,2,10]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options);
</script>

UPDATE chart.js 2.1 and above
var chart = new Chart(ctx, {
...
options:{
scales:{
xAxes: [{
display: false //this will remove all the x-axis grid lines
}]
}
}
});
var chart = new Chart(ctx, {
...
options: {
scales: {
xAxes: [{
ticks: {
display: false //this will remove only the label
}
}]
}
}
});
Reference: chart.js documentation
Old answer (written when the current version was 1.0 beta) just for reference below:
To avoid displaying labels in chart.js you have to set scaleShowLabels : false and also avoid to pass the labels:
<script>
var options = {
...
scaleShowLabels : false
};
var lineChartData = {
//COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS
//labels : ["1","2","3","4","5","6","7"],
...
}
...
</script>

This is for chart.js ^3.0.0
Remove x-axis labels and grid chart lines
var chart = new Chart(ctx, {
...
options:{
scales:{
x: {
display: false
}
}
}
});
Remove only x-axis labels
var chart = new Chart(ctx, {
...
options: {
scales: {
x: {
ticks: {
display: false
}
}
}
}
});

(this question is a duplicate of In chart.js, Is it possible to hide x-axis label/text of bar chart if accessing from mobile?)
They added the option, 2.1.4 (and maybe a little earlier) has it
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
ticks: {
display: false
}
}]
}
}
}

var lineChartData = {
labels: ["", "", "", "", "", "", ""] // To hide horizontal labels
,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: [28, 48, 40, 19, 86, 27, 90]
}
]
}
window.onload = function(){
var options = {
scaleShowLabels : false // to hide vertical lables
};
var ctx = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, options);
}

Faced this issue of removing the labels in Chartjs now. Looks like the documentation is improved.
http://www.chartjs.org/docs/#getting-started-global-chart-configuration
Chart.defaults.global.legend.display = false;
this global settings prevents legends from being shown in all Charts. Since this was enough for me, I used it. I am not sure to how to avoid legends for individual charts.

For those whom this did not work, here is how I hid the labels on the X-axis-
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 1,
right: 2,
top: 2,
bottom: 0,
},
},
scales: {
xAxes: [
{
time: {
unit: 'Areas',
},
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
maxTicksLimit: 7,
display: false, //this removed the labels on the x-axis
},
'dataset.maxBarThickness': 5,
},
],

Inspired by christutty's answer, here is a solution that modifies the source but has not been tested thoroughly. I haven't had any issues yet though.
In the defaults section, add this line around line 71:
// Boolean - Omit x-axis labels
omitXLabels: true,
Then around line 2215, add this in the buildScale method:
//if omitting x labels, replace labels with empty strings
if(Chart.defaults.global.omitXLabels){
var newLabels=[];
for(var i=0;i<labels.length;i++){
newLabels.push('');
}
labels=newLabels;
}
This preserves the tool tips also.

The simplest solution is:
scaleFontSize: 0
see the chart.js Document
smilar question

If you want the labels to be retained for the tooltip, but not displayed below the bars the following hack might be useful. I made this change for use on an private intranet application and have not tested it for efficiency or side-effects, but it did what I needed.
At about line 71 in chart.js add a property to hide the bar labels:
// Boolean - Whether to show x-axis labels
barShowLabels: true,
At about line 1500 use that property to suppress changing this.endPoint (it seems that other portions of the calculation code are needed as chunks of the chart disappeared or were rendered incorrectly if I disabled anything more than this line).
if (this.xLabelRotation > 0) {
if (this.ctx.barShowLabels) {
this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3;
} else {
// don't change this.endPoint
}
}
At about line 1644 use the property to suppress the label rendering:
if (ctx.barShowLabels) {
ctx.fillText(label, 0, 0);
}
I'd like to make this change to the Chart.js source but aren't that familiar with git and don't have the time to test rigorously so would rather avoid breaking anything.

UPDATE: chartjs ^4.2.0 + react-chartjs-2 ^5.2.0
Axis was removed.
const options = {
legend: {
display: false,
},
scales: {
x: {
display: false,
},
y: {
display: false,
},
},