I have created a line chart and on hover of the points am not able to see the tooltips. It seems to throw error while hovering on line points. TypeError: Cannot read property 'format' of undefined
So far I was able to render the line chart with time data which required the adapters. As per the docs, tried changing the units and wanted to see axis labels but that is also not visible.
Below is the Chart configuration and fiddle:
var data = [{
"t": 1622287843965,
"y": "35181.38"
},
{
"t": 1622288064247,
"y": "35779.44"
},
{
"t": 1622288261196,
"y": "35681.55"
},
{
"t": 1622288644294,
"y": "35552.49"
}
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: `Price`,
data: data,
backgroundColor: "rgba(134,159,152, 1)",
borderColor: "rgba(174, 305, 194, 0.4)"
}],
},
options: {
parsing: {
yAxisKey: 'y',
xAxisKey: 't',
},
scales: {
xAxis: {
adapters: {
date: {}
},
ticks: {
source: "labels"
},
display: true,
type: 'time',
time: {
unit: 'day'
}
}
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.1/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns#2.0.0/dist/chartjs-adapter-date-fns.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
This is because you added an adapter but forgot to add the corosponding date library. See working example:
var data = [{
"t": 1622287843965,
"y": "35181.38"
},
{
"t": 1622288064247,
"y": "35779.44"
},
{
"t": 1622288261196,
"y": "35681.55"
},
{
"t": 1622288644294,
"y": "35552.49"
}
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
type: "line",
data: {
datasets: [{
label: `Price`,
data: data,
backgroundColor: "rgba(134,159,152, 1)",
borderColor: "rgba(174, 305, 194, 0.4)"
}],
},
options: {
parsing: {
yAxisKey: 'y',
xAxisKey: 't',
},
scales: {
x: {
adapters: {
date: {}
},
ticks: {
source: "labels"
},
display: true,
type: 'time',
time: {
unit: 'day'
}
}
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.3.1/dist/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
Related
I tried to pass data from data.json to mustache template in order to create bar graph.
I am unable to figure out where exactly I need to pass the data to get the graph right.
Please help me to figure out by reviewing the following code snippets.
<html>
<body>
<div>
<canvas height="200px" width="300px" id="bar-graph"></canvas>
</div>
<script>
const barCtx = document.getElementById('bar-graph').getContext('2d');
new Chart(barCtx, barGraphConfig());
function barGraphConfig() {
return {
type: 'bar',
data: {
datasets: [{
data: {{barGraph}},
borderRadius: 5,
backgroundColor: [
'#fece8c',
'#a28cfe',
'#a28cfe',
'#feab8c',
'#8ca2fe',
'#8ca2fe',
],
barThickness: 20
}],
labels: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B']
},
options: {
plugins: { legend: { display: false } },
showTooltip: false,
animation: {
duration: 0,
onComplete: renderDataLabel,
},
parsing: {
xAxisKey: 'sector',
yAxisKey: 'value'
},
scales: {
x: {
grid: {
borderWidth: 3,
borderColor: '#232323',
display: false,
},
},
y: {
display: false,
beginAtZero: true
}
}
},
};
}
</script>
</body>
</html>
data.json
barGraph: [
{
"name": "A",
"value": 4
},
{
"name": "AAA",
"value": 10
},
{
"name": "B",
"value": 40
},
{
"name": "BB",
"value": 20
},
{
"name": "BBB",
"value": 7
}
]
The error we are getting
You can use the structure of the data.json as dataset.data. But to enable CHART.JS to read correctly the data, you should set options.parsing option at chart level, as following:
options: {
parsing: {
xAxisKey: 'name',
yAxisKey: 'value'
}
}
See documentation of CHART.JS: https://www.chartjs.org/docs/latest/general/data-structures.html#object-using-custom-properties
const barGraph = [
{
"name": "A",
"value": 4
},
{
"name": "AAA",
"value": 10
},
{
"name": "B",
"value": 40
},
{
"name": "BB",
"value": 20
},
{
"name": "BBB",
"value": 7
}
];
const barCtx = document.getElementById('myChart').getContext('2d');
new Chart(barCtx, barGraphConfig());
function barGraphConfig() {
return {
type: 'bar',
data: {
datasets: [
{
data: barGraph,
borderRadius: 5,
backgroundColor: [
'#fece8c',
'#a28cfe',
'#a28cfe',
'#feab8c',
'#8ca2fe',
'#8ca2fe',
],
barThickness: 20
}
],
},
options: {
parsing: {
xAxisKey: 'name',
yAxisKey: 'value'
}
}
};
}
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I would like to create a time line like this:
[1]: https://i.stack.imgur.com/RQ819.png
But I don't understand how to put green into the top bar and yellow into the bottom bar.
This is what I got so far but I don't find anything how to make group only for one bar.
// Set Up
const labels = ["ONLINE", "IDLE"];
const data = {
labels: labels,
datasets: [
{
label: "ONLINE",
data: [
["2022-01-01", "2022-01-02"],
["2022-01-03", "2022-01-04"],
],
backgroundColor: ["green"],
},
{
label: "IDLE",
data: [
["2022-01-02", "2022-01-03"],
["2022-01-04", "2022-01-05"],
],
backgroundColor: ["orange"],
},
],
};
// Config
const config = {
type: "bar",
data: data,
options: {
responsive: true,
indexAxis: "y",
scales: {
xAxis: {
min: "2022-01-01",
type: "time",
time: {
unit: "day",
},
ticks: {
display: false,
},
},
yAxes: {
stacked: true,
beginAtZero: true,
},
},
},
};
// Render Chart
const myChart = new Chart(document.getElementById("myChart"), config);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
You need to define a separate datasets for each floating bar.
Please take a look at your amended code and see how it works.
const data = {
labels: ["ONLINE", "IDLE"],
datasets: [{
label: "Jan 1 - Jan 2",
data: [["2022-01-01", "2022-01-02"],],
backgroundColor: "green"
},
{
label: "Jan 2 - Jan 3",
data: [,["2022-01-02", "2022-01-03"]],
backgroundColor: "orange"
},
{
label: "Jan 3 - Jan 4",
data: [["2022-01-03", "2022-01-04"],],
backgroundColor: "green"
},
{
label: "Jan 4 - Jan 5",
data: [,["2022-01-04", "2022-01-05"]],
backgroundColor: "orange"
}
]
};
const config = {
type: "bar",
data: data,
options: {
responsive: true,
indexAxis: "y",
scales: {
x: {
min: "2022-01-01",
type: "time",
time: {
unit: "day"
}
},
y: {
stacked: true
}
}
}
};
const myChart = new Chart("myChart", config);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
I am plotting a graph using chart js. I have a couple of inconsistent data. For instance, the example data I have shared starts with 1909 and the next is 1960. In other cases, they are properly displayed: 1980, 1981, 1982...
Is there a way for me to handle specific data with gaps? For instance, have the year displayed sequentially.
const ctx = canvas.getContext("2d");
const myChart = new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
label: "Country Population",
data: data,
}, ],
},
options: {
scales: {
x: {
title: {
display: true,
text: "Year",
},
xAxes: [{
type: 'time',
time: {
unit: 'year'
}
}]
},
y: {
title: {
display: true,
text: "Population",
},
},
},
},
});
How library you are using time and chart? I use chart(v3.8) and luxon(time) seems to work
const exampleData = [{
"x": +new Date('1909'),
"y": 48900202
},
{
"x": +new Date('1960'),
"y": 889030
},
{
"x": +new Date('1961'),
"y": 890203
},
{
"x": +new Date('1983'),
"y": 8904
},
]
const chartCfg = {
type: 'line',
data: {
datasets: [{
borderColor: 'green',
backgroundColor: 'green',
borderWidth: 1,
pointStyle: 'cross',
data: exampleData,
label: 'example',
}, ],
},
options: {
maintainAspectRatio: false,
animation: false,
parsing: false,
interaction: {
mode: 'index',
},
scales: {
x: {
type: 'time',
time: {
displayFormats: {
year: 'yyyy',
},
},
},
},
},
};
const chartCtx = document.getElementById('chart').getContext('2d');
const chart = new Chart(chartCtx, chartCfg);
chart.canvas.parentNode.style.height = '300px';
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.4.0/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>
<canvas id="chart""></canvas>
I currently display my data like this:
Click here
but I would like to display the data like this:
Click here
The idea is that at the bottom it would show the summary of all three colors numbers combined, but once you hover it would show how much each color has.
If all is one bar, if red is 7, blue is 3, the red but be a lot more in the bar.
This is the code for version 1, done with chart js
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
labels: ["Chocolate", "Vanilla", "Strawberry"],
datasets: [
{
label: "Blue",
backgroundColor: "blue",
data: [3, 7, 4]
},
{
label: "Red",
backgroundColor: "red",
data: [4, 3, 5]
},
{
label: "Green",
backgroundColor: "green",
data: [7, 2, 6]
}
]
};
var myBarChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
barValueSpacing: 20,
scales: {
yAxes: [{
ticks: {
min: 0,
}
}]
}
}
});
const myChart = new Chart(
document.getElementById('myChart'),
config
);
your problem is the next, you are using a wrong config you must something like this:
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.6.0/dist/chart.min.js"></script>
<canvas id="MyChart" width="400" height="200"></canvas>
<script>
new Chart(document.getElementById("MyChart"), {
type: 'bar',
data: {
labels: [2017],
datasets: [{
label: "Chocolate",
type: "bar",
stack: "Base",
backgroundColor: "#eece01",
data: [30],
}, {
label: "Vanilla",
type: "bar",
stack: "Base",
backgroundColor: "#87d84d",
data: [-15],
}, {
label: "Strawberry",
type: "bar",
stack: "Base",
backgroundColor: "#f8981f",
data: [20],
}, {
label: "candy",
type: "bar",
stack: "Base",
backgroundColor: "#00b300",
backgroundColorHover: "#3e95cd",
data: [-10]
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
});
</script>
Now you just need to fix the styles and sizes of the graphic
If someone finds this, the solution is this:
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
My friend and I have a problem with chartjs. We created an app to track your financial status. We wanted to push data to the graph, but after the third entry, the graph only displays two data points, eventhough three points are created pushed to the graph. Here are screenshots and the code. Can you help us? Thanks.
Chartjs displays only the datapoint before
Console shows 400
var config = {
type: 'line',
data: {
labels: [],
datasets: [{
label: $('#idDropdownKonto option')['0'].innerText,
backgroundColor: 'rgb(0, 87, 255)',
borderColor: 'rgb(0, 87, 255)',
data: [],
fill: false
}, {
label: $('#idDropdownKonto option')['1'].innerText,
fill: false,
backgroundColor: 'rgb(0, 255, 133)',
borderColor: 'rgb(0, 255, 133)',
data: []
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Finanzr Chart'
},
tooltips: {
mode: 'index',
intersect: true
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Datum'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Kontostand'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myLine = new Chart(ctx, config);
console.log("------Store--------");
console.log(store.get('dataSchema'));
console.log("--------------");
if(myLine.data.datasets[0].data.length == 0) {
console.log("STORE DATA");
window.myLine.data.datasets[0].data.push(store.get('dataSchema'));
window.myLine.update();
}
};
function addDataGraph() {
let Betrag = $('#inputBetrag').val();
let Konto = $('#inputKonto').val();
let Beschreibung = $('#inputBeschreibung').val();
var betragArray = [Betrag];
var kontoArray = [Konto];
var beschreibungArray = [Beschreibung];
var dataPointArray = beschreibungArray.concat(kontoArray);
var sortDateArray = [aktuellesDatum].sort(dateFns.compareAsc);
var dateArray = [sortDateArray];
var ArrayLength0;
var ArrayLength1;
if(myLine.data.datasets[0].data.length == 0) {
console.log("Dataset not found");
myLine.data.datasets[0].data.push(Betrag);
store.set('dataSchema', Betrag);
} else {
console.log("--------------");
console.log(store.get('dataSchema'));
console.log("--------------");
//=> 50
console.log("Dataset found");
if(Konto === 'Postbank') {
console.log('Postbank');
var BetragBerechnen = JSON.parse(store.get('dataSchema')) + JSON.parse(Betrag);
console.log(BetragBerechnen);
myLine.data.datasets[0].data.push(BetragBerechnen);
// myLine.data.datasets[0].label = 'Postbank';
myLine.data.labels.push(dateArray);
store.set('dataSchema', BetragBerechnen);
}
}
myLine.update();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="150"></canvas>
<button type="button" class="bg-blue-500 hover:bg-blue-700 text-white rounded-full py-2 px-4 m-2" onclick="addDataGraph()" name="button">Update Graph</button>
app.compontent.html
<canvas id="line-chart" style="width: 100%; height:250px;"></canvas>
app.component.ts
import { Chart } from 'chart.js';
chart: any = '';
ngOnInit() {
this.chart = new Chart('line-chart', {
type: 'line',
data: {
labels: ["JAN 05", "JAN 06", "JAN 07", "JAN 08", "JAN 10", "JAN 12", "JAN 15", "JAN 20", "JAN 21", "JAN 22", "JAN 23", "JAN 24"],
datasets: [
{
data: [10, 12, 15, 12, 18, 12, 10, 12, 17, 12, 12, 20],
label: "Africa",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
scales: {
yAxes: [{
display: false //this will remove all the x-axis grid lines
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function (tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
}