For some reason the xAxes of my chart goes from most recent data to oldest date. I obviously want it the other way around / the normal way. How do I revert the xAxes? .. or just the xAxes to act normally with dates.
My chart is here: https://www.betscout.com/tips (Click the Stats tab)
I've already tried this option: https://jsfiddle.net/marineboudeau/4awme3fp/3 - but it doesn't work, not even in the provided example (nothing change when I replace reverse: true with reverse: false.)
I can easily reverse the yAxes this way, so why not xAxes?
Here's some of my JS code:
let chart = document.getElementById('chart');
let myLineChart = new Chart(chart, {
type: 'line',
data: {
labels: grades,
datasets: [{
data: numbers,
label: 'Total profit',
fill: false,
borderColor: '#3771a3'
}]
},
options: {
scales: {
yAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(55, 113, 163, 0.18)"
},
ticks: {
display: true,
reverse: true,
fontSize: 12
}
}]
}
}
});
}
I think it is still being discussed as to why it isn't working, you could do numbers.reverse() and grades.reverse() until it it fixed. fiddle
Related
I have a graph where I am trying to draw a pareto chart by using chart.js. I am combining bar chart and line chart to achieve this. Here is my sample graph:
Here is the code:
this.chartData = {
labels: labels,
datasets: [
{
data: lineData,
label: "Cumulative Total of Number of Reassignments",
type: 'line',
fill: false,
datalabels: {
color: "#0f0f0f"
},
},
{
label: "Number of Reassignments",
data: datasetsLabel,
datalabels: {
color: "#0f0f0f"
}
},
]
}
lineData array holds the values 45.87, 64.22, etc.
datasetsLabel array holds the values 250, 100, 90, etc.
I tried to use the following options:
this.options = {
responsive: true,
scales: {
yAxes: [
{
ticks: {
stepSize: 5,
},
},
{
display: true,
position: 'right',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}
],
},
}
What I want to achieve is put 45.87, 62.22, etc values to the right side of the graph. How can I achieve this?
Chart.js Version: 2.7.1
I have in use since two years some pages which present a number of graphs, always with horizontal bars, but now I wish to select different formats, like bar and line.
When one of these options is selected I always get the same error: 'TypeError: e.slice is not a function'.
I thought that in the chart option is only required to change the tipe of graph, but possibly I'm missing something else.
This is the chart declaration:
var myBarChart = new Chart(ctx, {
type: 'horizontalbar',
data: {
labels: nameArray,
datasets: [{
label: 'Visite nel periodo alla pagina: ' + pag ,
data: valueArray,
backgroundColor:'rgba(255, 32, 0, 0.5)'
}]
},
options: chartOptions,
});
And this is the chartOptions (sorry, is quite long):
chartOptions = {
maintainAspectRatio:false,
aspectRatio:4,
fontStyle:"bold",
defaultFontStyle:"bold",
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
labels: {
show: true,
fontStyle:"bold"
},
}],
yAxes: {
display: true,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
scaleLabel: {
display: true,
labelString: "Acquisti",
fontColor: 'rgba(0, 80, 212, 0.5)',
fontSize:18,
fontStyle:"bold"
},
ticks: {
beginAtZero: true,
min:0,
fontSize:14,
fontStyle:"bold",
fontColor:"#03a"
},
labels: {
show:true,
fontStyle:"bold"
}
}
},
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0
}
},
title: {
display: true,
fontColor: "#c40",
fontSize: 16,
text: chartTitle,
}
};
When I want to switch from a format to another I only programmatically change this line : type: 'bar' or type: 'line'.
Is there anything else I should change?
Thanks
I finally found the problem, even if the original cause is still unknown.
In the 'options' declaration there was an offending block, this one:
labels: {
show: true,
fontStyle:"bold"
},
I do not recall where this block is coming from, possibly some tests in the past; even leaving only the 'labels' declaration without any parameters, raises the error. Deleting the block makes the chart perfect.
I want to draw a bar plot with chart.js using this code (very simple):
this.plotEnergy = new Chart($('#plotEnergy'),
{
type: 'bar',
animation: false,
data:
{
labels: ["aaa", "bbb"],
datasets: [ {
label: "ijoij",
backgroundColor: '#000000',
data: [2000, 2300]
},
{
label: "ijooijojij",
backgroundColor: '#FF00FF',
data: [1500, 2500]
},
]
},
options:
{
tooltips:
{
mode: 'index',
intersect: false
},
title:
{
display: true,
text: 'Generated energy'
},
responsive: true,
scales:
{
xAxes: [
{
stacked: 'false',
position: 'bottom',
}],
yAxes: [
{
stacked: false,
scaleLabel:
{
display: true,
labelString: 'Energy [kWh]'
},
ticks: {
beginAtZero: true
}
}]
}
}
});
But I get this: The labels are showed correctly, even the y-axis range is correct. But the bars don't show up. I can click on the legends items to make the corresponding data disappear and the y-axis range would adapt correctly.
Anyone has an idea?
I have been working with some Chart.js and I have been trying to figure out how to remove the axis lines on a chart.
You can see the grid lines I am trying to remove in this image.
I have managed to remove the grid lines that appear within the chart where the data is represented, but I am having an issue removing these two lines.
You can see the chart.js I have created for the chart below.
var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: <?php echo $cause_label_json?>,
datasets: [{
backgroundColor: benefactoGraph_colours,
data: <?php echo $cause_value_json?>
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
},
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
Any suggestions would be much appreciated.
You need to set the drawBorder property of grid-lines to false in order to remove those axis lines, like so :
...
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
drawBorder: false //<- set this
},
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false //<- set this
}
}]
}
...
You can set display: false in your axis object
scales: {
xAxes: [{
display: false,
gridLines: {}
}],
yAxes: [{
display: false,
gridLines: {}
}]
}
The other answers are correct for different versions of chart.js, but as of Jan 2020, with version 2.9.3, I was able to resolve the issue by nesting display: false inside of gridlines as follows:
...
, options:
scales: {
xAxes: [{
gridLines: {
display: false
},
...
Here's a related GitHub issue.
Hope you all doing well :)
I have a question about displaying list of array objects in highchart.
Below is my data structure, as you can see this is a list of 5 array objects.
I want "name" to be my xAxis value and "y" to be my yAxis value.
series: [{
colorByPoint: true,
data: $scope.requiredData
}]
It returns me a chart like this,
Can anyone help with that?
Many Thanks
Please conver you array of objects as
var result = array.map(i=>([i.name,i.y]))
this will give you as [[x1,y1],[x2,y2],[x3,y3]] format
Hope this will help you.
incomeReportChart = new Chart(incGraphElem, {
type: 'bar',
data: {
labels: incomeData.labels,
barThickness : 1,
datasets: [{
label: incomeData.label[0],
fontSize: "8",
data: incomeData.income,
backgroundColor : "#5B90C2",
color: "#000000",
borderWidth: 1
},
options: {
scales: {
yAxes: [{
stacked: true,
barThickness : 5,
ticks: {
fontColor: '#454545',
stepSize : 5000,
beginAtZero : true
}
}],
xAxes: [{
stacked: true,
fontColor: '#454545',
barThickness : 12,
ticks: {
beginAtZero:true
}
}]
}
}
});
Here you need to just set label and data in datasets as per requirnment.