score:5
Accepted answer
You are using outdated Chart Library or not including proper Chart Library, I am not sure what you are using in your actual code. Below code worked for me. Just add ChartJs bundle file to have all dependencies loaded.
/**
* JS Code for the admin-panel/contact/reports.
*
* It handles initializtion of the customer flow chart.
*/
'use strict';
jQuery(document).ready(function() {
console.log('admin-panel/contact/reports');
// Initialize the custome flow chart.
initializeCustomerFlowChart();
});
function initializeCustomerFlowChart() {
var dataSet = [];
for(var i = 0 ; i < 20; i++) {
var date = new Date();
date = date.setDate( date.getDate() + i);
dataSet.push({ t: date, y: i.toString() });
}
var data = {
datasets: [
{
label: 'Customer Flow',
backgroundColor: 'rgba(255,0,0, 0.5)',
borderColor: 'rgb(255,0,0)',
data: dataSet,
type: 'line',
pointRadius : 0,
fill: false,
lineTension: 0,
broderWidth: 2
}
]
};
var options = {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
ticks: {
source: 'data',
autoSkip: true
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'No. Of Customer'
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
callbacks: {
label: function(tooltipItem, myData) {
var label = myData.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += parseFloat(tooltipItem.value).toFixed(2);
return label;
}
}
}
};
var config = {
type: 'bar',
data: data,
options: options
};
var context = document.getElementById('contact-reports-customer-flow-chart').getContext('2d');
var chart = new Chart(context, config);
}
<canvas id="contact-reports-customer-flow-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
Hope this solves the issue.
Source: stackoverflow.com
Related Query
- Time series line chart is not displayed
- Time Series Line chart js in react not working
- Line chart is not being displayed in Chart.js
- Stacked line chart not displaying correctly when Xaxis is time
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- ChartJS not showing data for time series bar chart
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS - set start of week for x axis time series
- Angular-chart.js - Make line chart does not curve
- angular-chartjs line chart TypeError: t.merge is not a function
- Chart.js line chart is not displaying
- How can I create a time series line graph in chart.js?
- Series Details Not Showing in Angular Chart with Charts.js
- Click event of stacked line chart not working
- Chart.js tooltip not showing on line chart
- annotation line not visible in scatter chart in chartjs
- Line chart doesn't work with type time chart.js
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Want only line not area under it in chart js
- Do not draw line on condition in ChartJS line chart
- Legend not displaying on Line or Bar chart - React-Chartjs-2
- react chart js, title is not displayed
- How do you make a progressive line chart with time as the X axis?
- Chart.js: chart not displayed from modules despite no errors - JS
- Line Chart using Chart js with time data
- Chart content not getting displayed in ionic
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Line Chart is not setting backgroundColor when created dynamically Chart.js
More Query from same tag
- chartjs tooltip is cut off when out of canvas
- Plotting Real Time data using Flask Chart.js
- Displaying line chart for multiple months using chart.js
- Search box to show information in line chart
- Can I use a custom data format when using Vue + Chartjs
- Is it possible to set top border on ChartJS Doughnut Gauge chart
- Chart.js: How to group legends of dataset? So one toggle for multiple datasets?
- Chart.js loading data colors from PHP
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Can I add some variables to my chart.js in page know that variables?
- Is it possible to print to pdf a Canvas with other div elements?
- ChartJS have xAxes labels match data source
- Chart.js v3.7.1 Chart is not a Constructor
- Can't render multiple responsive canvas graphs in different tabs
- Change bar color depending on value
- Chart.JS how to change order of y-axis
- Destroy ChartJS rendered with Symfony
- Chart.JS Alternate background color for xAxis
- How to remove the extra Y axis from a bar chart in chart.js
- Dropdown component not having effect in Chromium browser
- How to create multi scale chart?
- JavaScript function based on counter
- Chart.js : Controller for Scatter chart doesn't work for draw function
- Set animation dynamically in Chart.JS
- Protractor - Get array from canvas attribute in Angular2 using ng2-charts/Chart.js
- ChartJs - Footer color dynamically
- ChartJS datasets with one data value
- ChartJS Bar Issue - Showing "zeros" and not center bars
- Chart.js only displays font changes upon hover
- Chart.js not rendering unless i set a timeout