score:2
chartjs does not work on div tag so you need to use canvas instead of div tag. here you can find chart examples.
<canvas id="sample-chart" height="300" width="500">
<script>
var areadata = {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
data: [60, 63, 68, 53, 52],
backgroundcolor: [
'#d6eef3'
],
bordercolor: [
'#1dbfd3'
]
}
]
};
var areaoptions = {
responsive: true,
maintainaspectratio: false
}
var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
type: 'line',
data: areadata,
options: areaoptions
});
</script>
score:0
there's no canvas in your html.
add it into the sample-chart
div like:
<div id="sample-chart">
<canvas id="mychart"></canvas>
</div>
score:0
you either need to change the div to a canvas or have jquery convert it from a div to a canvas using a replacer function.
var areadata = {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
data: [60, 63, 68, 53, 52],
backgroundcolor: [ '#d6eef3' ],
bordercolor: [ '#1dbfd3' ]
}]
};
var areaoptions = {
responsive: true,
maintainaspectratio: false
}
var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
type: 'line',
data: areadata,
options: areaoptions
});
#sample-chart {
height: 300px;
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<!-- needs to be a canvas, not a div -->
<canvas id="sample-chart"></canvas>
replacer
(function($) {
$.fn.applyattributes = function(attributes) {
var self = this;
$.each(attributes, function() {
self.attr(this.name, this.value);
});
return self;
};
$.fn.replacetag = function(tagname) {
this.each((i, e) => {
this.replacewith($('<' + tagname + '>').applyattributes(this.prop('attributes')));
});
};
})(jquery);
var areadata = {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
data: [60, 63, 68, 53, 52],
backgroundcolor: [ '#d6eef3' ],
bordercolor: [ '#1dbfd3' ]
}]
};
var areaoptions = {
responsive: true,
maintainaspectratio: false
};
$("#sample-chart").replacetag('canvas'); // replace tag name with canvas
// modified the dom, we will need to re-query it.
var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
type: 'line',
data: areadata,
options: areaoptions
});
#sample-chart {
height: 300px;
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<!-- needs to be a canvas, not a div -->
<div id="sample-chart"></div>
score:1
put it into document ready
context
$(function () {
var areadata = {
labels: ["1", "2", "3", "4", "5"],
datasets: [{
data: [60, 63, 68, 53, 52],
backgroundcolor: [
'#d6eef3'
],
bordercolor: [
'#1dbfd3'
]
}
]
};
var areaoptions = {
responsive: true,
maintainaspectratio: false
}
var samplechartcanvas = $("#sample-chart").get(0).getcontext("2d");
var samplechart = new chart(samplechartcanvas, {
type: 'line',
data: areadata,
options: areaoptions
});
})
Source: stackoverflow.com
Related Query
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- how to not repeat code while creating multiple charts in chart js
- ReferenceError: Chart is not defined - chartjs
- Chart.js: bar chart first bar and last bar not displaying in full
- Chart.js responsive option - Chart not filling container
- show label in tooltip but not in x axis for chartjs line chart
- Html chart does not fit a small Android WebView
- Chart.js ng2-charts colors in pie chart not showing
- Chart.JS Mixed Chart - Bars Not Showing
- Chart looks only grey, does not show the color - Chartjs,discordjs
- 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
- Chart.js: width and height of a pie chart not respected
- Uncaught TypeError: Chart is not a constructor when using Chart.js
- Line chart is not being displayed in Chart.js
- Series Details Not Showing in Angular Chart with Charts.js
- Chartjs not rendering chart and no error thrown
- Chart.js pie chart not showing in Google Chrome canvas
- Chart.js Chart in Angular does not load until resizing browser window
- vue.js vue-chartjs chart not updating when chartData replaced, updated etc
- Chart.js update function (chart,labels,data) will not update the chart
- Time series line chart is not displayed
- Chart JS custom tooltip not showing
- Time Series Line chart js in react not working
- Annotation events not update the chart
- Pie chart is not getting rendered in ChartJS
- Angular: chart.js chart is not displaying
- Chart JS not rendering on iOS devices
- Primevue Chart not rendered
More Query from same tag
- ChartJS Unix Time Values changed
- How to add tooltips to chart.js graph
- How to Integrating Chart.js with Angular 7 with Data from database
- chartjs line graph destroy function is not clearing the old chart instances
- Chart JS custom tooltip not showing
- React chartjs 2 - Type 'string' is not assignable to type '"timeseries"'
- ChartJS get data from Controller
- Why is pan (and zoom) not working on my Chart.js graph?
- Chart.js / HTML Canvas - move line
- Accessing .csv data from views file
- Chartjs not displaying timed data
- How to show tooltip only when data available in chart js?
- How to have chart.js automatically build x-axis labels based on x,y dataset?
- Chart.js graph with just two cordinates
- Chart.js error: type lacks a call signature '((...items: number[]) => number) | ((...items: ChartPoint[]) => number)' in Angular
- Page will not load and I get a "Newtown.json" warning message
- Chartjs - Doughnut chart with multi layer and running value
- Customizing Chart.js troubleshoot
- charts.js not updating after ajax request
- Display some chart.js in the popup of chrome's extensions
- Chart.js add tooltip at intersection of axes (break even)
- chart.js mixed chart types
- Redraw Chart.js with PHP JSON
- Chart.js Radar Chart How to Remove Outer Labels
- How to allow zooming in between range only in chartjs-plugin-zoom
- Can I modify or extend ChartJS?
- Angular : how to display a modal-dialog (chart) in ng-template
- How to remove legend at the bottom of chartjs doughnuts
- ChartJS and require: Chart is undefined
- How do you disable tooltips in ember-cli-chart?