Noob question, apologies, but reading through the docs it was not obvious, and doing the obvious thing is resulting all points on x==0 !?
Many thanks in advance!
My current code is
new Chart(canvasId,{
type: 'line',
data: {
datasets: [
{
label: 'Some Data',
data: [
{ x: 0, y: 2.344317674636841 },
{ x: 9, y: 2.2913742065429688 },
{ x: 19, y: 2.2962939739227295 },
{ x: 29, y: 2.26206374168396 },
{ x: 39, y: 2.2287118434906006 },
{ x: 49, y: 2.1946732997894287 },
{ x: 59, y: 2.192193031311035 },
{ x: 69, y: 2.1846773624420166 },
{ x: 79, y: 2.122765064239502 },
{ x: 89, y: 2.1172447204589844 },
{ x: 99, y: 2.125208616256714 },
]
},
]
}
});
You are using a line chart which uses a catagory scale by default for the x axes and as you can read in this section of the docs that does not work with integers https://www.chartjs.org/docs/3.9.1/general/data-structures.html#object
So you will need to set options.scales.x.type to 'linear'
Related
Currently using "Scatter Charts" to display my xy coordinates, working great. Another requirement is to draw a line chart based on average numbers on top of the scatter chart. Is this possible?
Link to Scatter Charts - https://apexcharts.com/angular-chart-demos/scatter-charts/basic/
Sample graph -
Yes, you can draw mixed charts with ApexCharts. You even have a demo of what you are looking for: Line Scatter – ApexCharts.js
I put the demo here for convenience:
let options = {
series: [{
name: 'Points',
type: 'scatter',
data: [{
x: 1,
y: 2.14
}, {
x: 1.2,
y: 2.19
}, {
x: 1.8,
y: 2.43
}, {
x: 2.3,
y: 3.8
}, {
x: 2.6,
y: 4.14
}, {
x: 2.9,
y: 5.4
}, {
x: 3.2,
y: 5.8
}, {
x: 3.8,
y: 6.04
}, {
x: 4.55,
y: 6.77
}, {
x: 4.9,
y: 8.1
}, {
x: 5.1,
y: 9.4
}, {
x: 7.1,
y: 7.14
},{
x: 9.18,
y: 8.4
}]
}, {
name: 'Line',
type: 'line',
data: [{
x: 1,
y: 2
}, {
x: 2,
y: 3
}, {
x: 3,
y: 4
}, {
x: 4,
y: 5
}, {
x: 5,
y: 6
}, {
x: 6,
y: 7
}, {
x: 7,
y: 8
}, {
x: 8,
y: 9
}, {
x: 9,
y: 10
}, {
x: 10,
y: 11
}]
}],
chart: {
height: 350,
type: 'line'
},
fill: {
type: 'solid'
},
markers: {
size: [6, 0]
},
tooltip: {
shared: false,
intersect: true
},
legend: {
show: false
},
xaxis: {
type: 'numeric',
min: 0,
max: 12,
tickAmount: 12
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
This particular example has not been integrated using Angular, but I think you can do it quite easily. Take a look at this page if you need additional inspiration: Angular Mixed Chart / Combination Chart Examples – ApexCharts.js
I have a chart were the data looks like this where X represents days of the week:
{x: 1, y: 18, r: 4.7614}
{x: 6, y: 17, r: 4.7619}
{x: 0, y: 16, r: 4.7657}
I'd like to rename the numbers to weekdays on the X axis (0: "Sunday", 1: "Monday") etc., but I can't figure it out.
My config looks like this: (but obviously not working).
Any help would be appreciated, thank you.
const config = {
type: "bubble",
data: data,
options: {
responsive: true,
scales: {
x: ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"],
},
},
}
You can use the tickCallback to transform the value to whatever you like, easyest thing to do is make an array with all the weekDays and then use the value as an index like so:
const weekDays = ["Sun", "Mon", "Thu", "Wen", "Tru", "Fri", "Sat"];
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 1,
r: 4
}, {
x: 1,
y: 1,
r: 4
}, {
x: 2,
y: 1,
r: 4
}, {
x: 3,
y: 1,
r: 4
}, {
x: 4,
y: 1,
r: 4
}, {
x: 5,
y: 1,
r: 4
}, {
x: 6,
y: 1,
r: 4
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
ticks: {
callback: (val) => (weekDays[val])
}
}
}
}
};
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>
I have a dataset which has large range between the largest and the smallest. My problem is that the smallest bar becomes invisible when the largest bar has too much data. Take a look at the screenshot below.
In the screenshot, the second, third, fifth and sixth bars all have one data point but they are being invisible. So my question is,
1) Is there anyway to make small data point visible for bar chart such as by setting min-height property on them?
2) If not, how can I make the chart so that hovering works on whole y-axis for a particular bar when the data is too small so that when I hover over the y-axis it shows label with data?
I've tried setting different styles on the bars to no avail.
Since you haven't provided your code, I can only tell you to use a logarithmic scale for your chart.
See this example for reference:
var dataPoints = [
{ x: 1994, y: 25437639 },
{ x: 1995, y: 44866595 },
{ x: 1996, y: 77583866 },
{ x: 1997, y: 120992212 },
{ x: 1998, y: 188507628 },
{ x: 1999, y: 281537652 },
{ x: 2000, y: 414794957 },
{ x: 2001, y: 502292245 },
{ x: 2002, y: 665065014 },
{ x: 2003, y: 781435983 },
{ x: 2004, y: 913327771 },
{ x: 2005, y: 1030101289 },
{ x: 2006, y: 1162916818 },
{ x: 2007, y: 1373226988 },
{ x: 2008, y: 1575067520 },
{ x: 2009, y: 1766403814 },
{ x: 2010, y: 2023202974 },
{ x: 2011, y: 2231957359 },
{ x: 2012, y: 2494736248 },
{ x: 2013, y: 2728428107 },
{ x: 2014, y: 2956385569 },
{ x: 2015, y: 3185996155 },
{ x: 2016, y: 3424971237 }
];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
theme: "dark2",
title:{
text: "Growth in Internet Users Globally"
},
axisX:{
title: "Year",
valueFormatString: "####",
interval: 2
},
axisY:{
logarithmic: true, //change it to false
title: "Internet Users (Log)",
titleFontColor: "#6D78AD",
lineColor: "#6D78AD",
gridThickness: 0,
lineThickness: 1,
includeZero: false,
labelFormatter: addSymbols
},
axisY2:{
title: "Internet Users",
titleFontColor: "#51CDA0",
logarithmic: false, //change it to true
lineColor: "#51CDA0",
gridThickness: 0,
lineThickness: 1,
labelFormatter: addSymbols
},
legend:{
verticalAlign: "top",
fontSize: 16,
dockInsidePlotArea: true
},
data: [{
type: "line",
xValueFormatString: "####",
showInLegend: true,
name: "Log Scale",
dataPoints: dataPoints
},
{
type: "line",
xValueFormatString: "####",
axisYType: "secondary",
showInLegend: true,
name: "Linear Scale",
dataPoints: dataPoints
}]
});
https://codepen.io/shaz1234/pen/PEKjOV
The codepen has my code
new Chart(document.getElementById("chartjs-0"), {
"type":"line",
"data": {
"datasets": [
{
"label":"My First Dataset",
"data": [
{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}
],
"fill":false,
"borderColor":"rgb(75, 192, 192)",
"lineTension":0.1
}
]
},
"options":{
}
}
);
Very simple example but the chart displays only the first two points. I would have expected the chart to scale to the min and max provided x values. Do I misunderstand how point line charts are designed to work or do I have a bug?
Thanks in advance for looking.
To help those who are stuck on this in 2019 (Chart.js 2.0), please see below :
For those who prefer to dig into the details and form your own inferences, You can refer to the chartjs example at https://www.chartjs.org/samples/latest/scales/time/line-point-data.html (go and view its source).
For those who want a quick answer: In short you can maintain your existing code, but add the following options: (I re-append Shaz's code for completeness)
new Chart(document.getElementById("chartjs-0"), {
"type":"line",
"data": {
"datasets": [
{
"label":"My First Dataset",
"data": [
{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}
],
"fill":false,
"borderColor":"rgb(75, 192, 192)",
"lineTension":0.1
}
]
},
// this is the part that will make it work... see .. xAxes type:'linear'
"options":{
responsive: true,
title: {
// optional: your title here
},
scales: {
xAxes: [{
type: 'linear', // MANDATORY TO SHOW YOUR POINTS! (THIS IS THE IMPORTANT BIT)
display: true, // mandatory
scaleLabel: {
display: true, // mandatory
labelString: 'Your label' // optional
},
}],
yAxes: [{ // and your y axis customization as you see fit...
display: true,
scaleLabel: {
display: true,
labelString: 'Count'
}
}],
}
}
}
);
Try this, This link may be helpful to you http://www.chartjs.org/docs/latest/charts/scatter.html
var ctx = document.getElementById("myChart");
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Edit:
Why We use Scatter chart instead of line Chart?
Line Chart is use when we want to plot data set on same difference,and data structure is one dimensional array, for example, data: [20, 10] then we use line chart.
But When we want plot data on different differences and data structure is 2 dimensional array then we use scatter chart.
for example,
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
Point objects ( {x:2, y:4}) can be interpreted by line chart and should be displayed correctly if you just specified a labels key before the datasets key:
data: {
labels:["a","b","c",...]
datasets: [{
label: 'my Dataset',
data: [{x: 0, y: 65},
{x: 4, y: 59},
{x: 100, y: 80},
{x: 110, y: 81},
{x: 125, y: 56}]
}]
},
note that the labels array and the data object inside the datasets should have the same number of elements.
I have multiple datasets of time based information, such as:
{ x: 1502007367658, y: 5},
{ x: 1502007367663, y: 3},
...
And
{ x: 1502007367653, y: 4},
{ x: 1502007367660, y: 7},
...
As you can see, these 2 sets do not overlap in the x axis.
How can I make chartJS show 2 lines with different X values for each?
Currently, I have a full overlap:
Because this is the code:
// 7 Labels, for 7 data points, non linear
this.chart.labels = [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)];
// 3 Datasets
this.chart.datasets = [
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
];
So is there a way to make each dataset with it's own X axis values?
Giving the dataset's data both X and Y solved the problem. Now it is like:
this.chart.datasets = [
{
data: [
{ x: newDate(-4), y: 65 },
{ x: newDate(-3), y: 59 },
{ x: newDate(-2), y: 80 }
],
label: 'Series A'
},
{
data: [
{ x: newDate(-3), y: 65 },
{ x: newDate(-2), y: 59 },
{ x: newDate(-1), y: 80 }
],
label: 'Series A'
},
{
data: [
{ x: newDate(-2), y: 65 },
{ x: newDate(-1), y: 59 },
{ x: newDate(0), y: 80 }
],
label: 'Series A'
}
];