We Keep Coding

Chart.JS: How to make sharp lines to smooth curved lines

Hi I'm new at charts and this is my chartjs chart, it's working currently, but it's showing in sharp lines and I want to make it smooth curve lines on this chart. Any ideas?
function statistics(data) {
if ($('#stats-currency').length > 0) {
if (typeof(stats_currency) !== 'undefined') {
stats_currency.destroy();
}
if (typeof(data) == 'undefined') {
var currency = $('select[name="currency"]').val();
$.get(admin_url + 'home/stats_currency/' + currency, function(response) {
stats_currency = new Chart($('#stats-currency'), {
type: 'line',
data: response,
options: {
responsive:true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
},
});
}, 'json');
} else {
stats_currency = new Chart($('#stats-currency'), {
type: 'line',
data: data,
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
},
});
}

This can be done through the option lineTension that needs to be defined on your dataset. Choose a value below 1.
datasets: [{
...
lineTension: 0.8
}]
By default, you should however already see curved smooth lines since accoring to Chart.js documentation, the default value is 0.4.
lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines.
Please note that if the steppedLine value is set to anything other than false, lineTension will be ignored.

you can do it by adding tension value to your charts options
<canvas id="myChart"></canvas>
JS
const config = {
type: 'line', // your chart type
data: data, // pass here your data
options: {
elements: {
line: {
tension : 0.4 // smooth lines
},
},
},
};
// pass it like
const myChart = new Chart(
document.getElementById('myChart'),
config
);

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,
},
},

Flot tick rotor showing ticks twice

so I used the flot-tickrotor plugin to rotate the ticks on the xaxis of my flot chart, the problem now though is, it shows up twice;
do any of you know why this is happenning?
here's the code I'm using for this, you'll notice I'm not specifically adding the ticks;
//sample data
var mainDataSet = {name:'1 - WOMENS OUTERWEAR', Actual: 181.8, Budget:15.7, BudgetVar: 8.4 } ,
{name:'2 - WOMENS LINGERIE', Actual: 12.5, Budget:6.0, BudgetVar: -1.3 } ,
{name:'3 - KIDSWEAR', Actual: 8.7, Budget:13.2, BudgetVar:0.8 } ,
{name:'5 - MENSWEAR', Actual: 4.9, Budget:4.4, BudgetVar: 0.5 } ,
{name:'6 - WOMEN FOOTWEAR+ACCES', Actual: 354.0, Budget:16.5, BudgetVar: 14.7 }
];
var graph_options = {
series: {
lines: { show:false , fillColor:'#CDD0D1', fill:true},
points: { show: false },
color: '#3B80F7',
},
grid: {
hoverable: true,
clickable: true,
show:true,
borderWidth: 0.5,
backgroundColor: { colors: ["#FFF", "#CDD0D1"] }
},
xaxis: {
mode: "categories",
//tickLength: 1,
rotateTicks: 45
}
};
var barGraphData = []; //graph_settings
var graph_settings = {label: dataSets[c].label,
data: mainDataSet,
bars: { show: true , align: "center", barWidth: 0.5},
color: '#3B80F7'
};
barGraphData.push(graph_settings);
var barGraph = $.plot($("#bar_graph_canvas"), barGraphData, graph_options);

Ok, so according the issue log for flot charts this is a known issue for flot since 0.8.1, the work around is to add this in your styling until the issue is resolved;
div.xAxis div.tickLabel { display:none }
NB: make sure you put this in a style tag INSIDE YOUR HEAD TAG or BEFORE you include your flot chart plugin, so that the default styling can be overridden

Change the Y-axis values from real numbers to integers in Chart.js

I have a chart that I want to include in my website using Chart.js. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?
Here's a picture of what I have now:
And this is the code:
var lineChartData = {
labels : ["2013/04/01","2013/03/31", "2013/03/30", "2013/03/29", "2013/03/28","2013/03/27", "2013/03/26"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : ["0", "2","1", "0", "1","0","1"]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

I handled it this way in new version:
new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value) {if (value % 1 === 0) {return value;}}
}
}]
}
}
});

I wasn't able to get the existing answers to work for me when using the new version 2 of Chart.js, so here's what I found to solve this problem in V2:
new Chart(ctx, {type: 'bar', data: barChartData,
options:{
scales: {
yAxes: [{
ticks: {
stepSize: 1
}
}]
}
}
});

Try this, where max is the highest value of your data.
var steps = 3;
new Chart(ctx).Bar(plotData, {
scaleOverride: true,
scaleSteps: steps,
scaleStepWidth: Math.ceil(max / steps),
scaleStartValue: 0
});

I know this is an old question now, but in the current version (v2.9.3) you can just set the precision of the y-axis ticks to zero to get integers:
options: {
scales: {
yAxes: [{
ticks: {
precision: 0
}
}]
}
}

As Ben Bloodworth above mentioned, the easier way is adding in options (precision: 0).
Currently working fine in version 3.7.1
options: {
scales: {
y: {
ticks: {
precision: 0
}
}
}
}

Check the Chart.js documentation, in the Global configuration section:
// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,

If you like to start in a different number than zero, you have to take that into account:
var step = 5;
var max = 90
var start = 40;
new Chart(income).Bar(barData, {
scaleOverride: true,
scaleSteps: Math.ceil((max-start)/step),
scaleStepWidth: step,
scaleStartValue: start
});

Something to note,
There are different versions of Chart.js, and they have different options object. In versions 3 and above, the x and y axis is an object whereas, in versions less than 3, they are defined as an array.
Example,
For version 3 and above,
options: {
scales: {
y: {
ticks: {
precision: 0
}
}
}
}
For version 3 and below,
options: {
scales: {
yAxes: [{
ticks: {
precision: 0
}
}]
}
}
Also, note that the y and x becomes yAxes and xAxex respectively.

Use of HIghlighter in PieChart : jQplot

I want to use Highlighter functionality in to a PieChart. My code is
function device_ownership_graph(titleOfGraph, corporateOwned,
corporateShared, employeeOwned) {
var arrCorporateOwned = [ 'Corporate-Owned', corporateOwned ];
var arrCorporateShared = [ 'Corporate-Shared', corporateShared ];
var arrEmployeeOwned = [ 'Employee-Owned', employeeOwned ];
$.jqplot.config.enablePlugins = true;
/*Here we construct graph*/
$.jqplot('device_ownership_graph', [ [ arrCorporateOwned, arrCorporateShared, arrEmployeeOwned ] ], {
title : {
text : titleOfGraph, // title for the plot,
show : true,
fontSize : 14,
textColor : '#808080',
textAlign : 'center'
},
seriesColors : [ "#00b0f0", "#ffc000", "#92d050"],
seriesDefaults : {
// Make this a pie chart.
renderer : jQuery.jqplot.PieRenderer,
shadow: false,
rendererOptions : {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels : true,
startAngle: 90,
sliceMargin: 1,
//highlightMouseOver: true
highlightMouseDown: true
}
},
legend : {
renderer : $.jqplot.PieLegendRenderer,
show : true,
rendererOptions : {
numberRows : 1,
numberColumns : 3,
disableIEFading : false
},
location : 'n',
placement : 'outsideGrid',
marginTop : '0px',
marginBottom : '0px'
},
grid : {
drawGridlines: false,
show : true,
background : 'transparent',
borderWidth : 1,
shadow : false
},
highlighter: {
showTooltip: true,
tooltipFade: true
}
});
$('#device_ownership_graph .jqplot-data-label').css('color', '#000000');
$('#device_ownership_graph').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);});
}
Problem
I am getting two different errors in two different browsers when mouse-move event on slices.
Chrome : -
Uncaught TypeError: Cannot read property 'formatter' of undefined jqplot.highlighter.min.js:57
Mozila :-
q._xaxis._ticks[0] is undefined
And one more issue, when I use highlightMouseDown: true its working (showing an alert) but when I use highlightMouseOver: true its not working.
What am I doing wrong in my code? Please help me.
UPDATE : 22 Jan 2013
I want the behavior of highlighter as it works in BarGraph. I used alert() in my given code, but that code is only for testing of highliter.

Both of the errors you are getting refer to the same problem. This line in jqplot.highlighter.min.js is the one:
var w=q._xaxis._ticks[0].formatter;
Chrome can't access the formatter property because q._xaxis._ticks is undefined (as reported in Firefox).
The solution (inspired by How to display tooltips on jqplot pie chart) is to add the following code into your seriesDefaults configuration:
highlighter: {
show: true,
formatString:'%s',
tooltipLocation:'sw',
useAxesFormatters:false
}
In your case, seriesDefaults would then look like:
seriesDefaults:{
// Make this a pie chart.
renderer : jQuery.jqplot.PieRenderer,
shadow: false,
rendererOptions : {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels : true,
startAngle: 90,
sliceMargin: 1,
highlightMouseOver: true
//highlightMouseDown: true
},
highlighter: {
show: true,
//formatString:'%s',
//tooltipLocation:'sw',
useAxesFormatters:false
}
}
The important thing is setting useAxesFormatters to false. Pie graphs don't have axes, hence the earlier error regarding q._xaxis._ticks being undefined.
Note that you will likely need the commented out formatString and tooltipLocation properties when you move away from using alert-based tooltips.
Edit:
I am assuming you mean the kind of highlighting that is found on this page: http://www.jqplot.com/deploy/dist/examples/barTest.html
In that last highlighter configuration you currently have:
highlighter: {
showTooltip: true,
tooltipFade: true
}
If you just want the highlighting effect and no tooltip, set showTooltip to false. Then remove the line of code where you bind to the jqplotDataHighlight event. This should ensure that the highlight effect will show up.

The previous answers do not work for me: it turns out that if you include jqplot.cursor it will break the pie chart.
To make it work again you need to have cursor:
{ show: false }
as part of your pie chart seriesDefaults options.