score:0
i don't know chart.js
but i think this is the result you were looking for.
var ctx = document.getelementbyid("mychart").getcontext("2d");
var mychart = new chart(ctx, {
type: 'doughnut',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: "number of votes",
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
ticks: {
beginatzero: true
}
}
}
}
});
.chart-container {
display: flex;
justify-content: center;
}
canvas {
max-width: 400px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--create node-->
<div class="chart-container">
<canvas id="mychart"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Chart js. How to align text by the center of the tooltip?
- How to align Chart.JS line chart labels to the center
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to Center a Chart.js Graph
- How to access or get value of specific graph on chart plot by click event?
- chartjs 2.7 how to add labels in center of horizontal bar graph
- How to print a chart rendered by code
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How do I destroy/update Chart Data in this chart.js code example?
- How to Add X axis Padding in chart js Line Graph
- angular-chart.js doughnut chart : how to show data in the center of a chart
- How do I horizontally center a line chart when their is a single X-Axis value?
- How to center radar chart ticks when changing start angle of chart?
- How to change bar color on a angular-chart and chart js bar graph with multiple datasets?
- How to run Chart.js samples using source code
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- how to not repeat code while creating multiple charts in chart js
- How to plot a single value with line in line chart graph using charts.js?
- how to only show zero grid axes at center and hide all other gridlines in chart js
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Chart.js - How to set a line chart dataset as disabled on load
- chart js 2 how to set bar width
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- How can I make two of my lines in Chart JS thicker
- How to prevent first/last bars from being cut off in a chart with time scale
- How set color family to pie chart in chart.js
- How to add tooltips to chart.js graph
More Query from same tag
- How to make fixed width of column without ticks.min/max in chart.js?
- export 'h' was not found in 'vue'
- Change dot size individually Scatter Chart -- ChartJS
- how to highlight stack bar in ChartJS with onclick
- Pass context to options on React ChartJS 2
- Chart.JS Display 5 largest values in the legend
- Chart.js with JSON data error
- Can't trigger beforeDraw with Vue-Chartjs (or any other plugins)
- Two pie charts in one flexbox container
- Show only nth tick LINE on x-axis for Chart.js diagram
- Synchronous XMLHttpRequest when loading charts.js in to a div
- How to implement mysql database connection in Chart.js
- Enable Stepped lines in Chart.Js
- ChartJS - line graph, position tooltip
- How to include adapters and plugins with ChartJS
- chart.js v 2.0.1 line, scatter chart pointRadius bug or I'm doing it wrong
- chart.js is not visible on blank data
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- chart.js coffeescript can't find variable
- How to make points in chartjs draggable?
- Charts js showing only when positives data
- warning in chartjs/react-chartjs options assignment if setting type:'time'
- MongoDB based data is not populating in Chart.js
- Angular Overlapping bars using chart.js
- ChartJS Doughnout Chart Pie Offset on Hover
- UndescoreJS - Convert Object Properties Into Arrays
- Chart.js displays the label in a weird font in IE8
- How to enable timescale in chart.js line chart?
- Uncaught TypeError: Cannot read property 'draw' of undefined : Angular chart js
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0