score:3
I think your data structure are use chartJS1, but your CDN is chartJS2.
that's why you got only error msg.
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56"
],
label: 'My dataset'
}]
};
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
});
score:2
Try creating the chart with this structure shown in the docs.
Looks like your structure is a little off based on the docs. http://www.chartjs.org/docs/#doughnut-pie-chart
var ctx = document.getElementById("myChart").getContext("2d");
// For a pie chart
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});`
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
It's responsive by default, expanding to it's parents container. You can set a parent container max-width or the canvas itself, which will keep it responsive for smaller screens.
<style type="text/css">
#myChart {
max-width: 400;
}
</style>
Or if you do not want it responsive at all you could set that option to false.
options: {responsive: false}
Source: stackoverflow.com
Related Query
- My pie chart (chartJs) does not appear
- Chartjs backgroundColor for line chart does not appear in Vue app
- Pie chart is not getting rendered in ChartJS
- Bar Chart of ChartJS does not Render
- Chartjs does not render chart when set responsive option to true
- ChartJs Memory Leak | Garbage Collection does not clean Chart Object or Arrays after render
- Legend color not working with randomly generated background colors in chartjs pie chart
- Chartjs columns does not appear by value
- Bar chart does not appear with Chart.js
- chartJS pie chart not updating after axios GET
- ChartJs does not render chart when binding canvas id in Angular
- ChartJs (ver: 2.8.0): Custom tooltip does not hide if clicked (or mouse pointer is moved) outside the chart canvas area
- React-chart does not render the legend for PIE chart
- updating chartjs pie chart by using .keypress() not working
- ChartJs - pie chart not showing
- Chartjs pie chart not showing from dynamic data
- Chartjs random colors for each part of pie chart with data dynamically from database
- ReferenceError: Chart is not defined - chartjs
- chartjs datalabels change font and color of text displaying inside pie chart
- show label in tooltip but not in x axis for chartjs line chart
- Display values outside of pie chart in chartjs
- Html chart does not fit a small Android WebView
- Chart.js ng2-charts colors in pie chart not showing
- chartjs height does not follow parent container
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Angular-chart.js - Make line chart does not curve
- Chart.js: width and height of a pie chart not respected
- 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
More Query from same tag
- after div display set to block nothing shows
- How can I change only a specific option in a chart with chart.js?
- Disable tooltip for Line chart for one line
- Chart.js legend - split into two and display separately?
- Chart.js legendcallback
- ChartJS - why is there a visual difference when displaying the same dataset alone or with more datasets?
- Create a ChartJS with 2 database tables
- Chart.js 2 - how to show all tooltips always and stylize it
- Angular Chart.js - Remove Moment.js as Dependency / Reduce Bundle Size
- Chart.js 2.0 - Tooltip is showing incomplete data on hover
- Cannot get react-chartjs options to take effect
- Chart.js time scale graph - xAxis labelling
- Chart.js - custom tooltip with multiple values
- How change chart height in chart.js
- Can you remove the xAxes border line and keep the ticks only?
- Why is the child component updating but not re-render Reactjs
- 【React chart.js】How to add multiple data to Radar chart using map function
- "TypeError: chart_js__WEBPACK_IMPORTED_MODULE_9__.default is not a constructor"
- Line Chart is not setting backgroundColor when created dynamically Chart.js
- Plot time on Y axis
- Frontend and backend for chart using chartjs, mongodb, and controller
- Is it possible to merge duplicate labels (and their datas) into one column in Chart Js?
- How to hide row in chartJS when filtering?
- react chart js, title is not displayed
- How to remove trial version watermark in canvasjs using Jquery (without license)
- How to add datas to chart js from my Array<number>? In Ionic3
- How to add horizontal scroll to a bar graph in chartjs?
- Chartjs2 set data 0 to type doughnut
- Is there a way to align title and legend on the same line?
- Chartjs - How to get last 7 days on x-axis labels?