score:0
I have updated source code from HeadhunterKev, plugin label is removed.
The idea is using startAngle: 20 and CSS Transform to Rotate the Chart.
new Chart(document.getElementById("pie-chart"), {
type: "polarArea",
data: {
labels: ["Dummy1", "Dummy 2", "Dummy 3", "Dummy 4"],
datasets: [
{
data: [125, 375, 300, 240],
backgroundColor: "#57C5C8",
borderWidth: 4,
hoverBorderColor: "white",
label: "Dummy Dummy "
}
]
},
options: {
cutoutPercentage: 20,
legend: {
display: false
},
layout: {
padding: 0
},
startAngle: 20,
scale: {
ticks: {
max: 450,
maxTicksLimit: 1,
display: false
},
angleLines: {
display: true
},
pointLabels: {
display: true
}
}
}
});
#pie-chart{
transform: rotate(-25deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
<div>
<canvas id="pie-chart" width="200" height="200"></canvas>
</div>
Please run Code Snipped to view the result, Please optimize rotate value to get the best result.
score:1
Here's my solution with the datalables plugin.
https://jsbin.com/bigedugasi/1/edit?html,js,output
I have updated my previous solutions to make the chart responsive.
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
anchor: 'start',
align: 'end',
offset: 0 // Gets updated
}
},
onResize: function() {
let width = document.getElementById("pie-chart").width
let padding = myChart.options.layout.padding
myChart.options.plugins.datalabels.offset = width/2-padding
}
Source: stackoverflow.com
Related Query
- Chart.js PolarArea Chart. Changing the labels to a 45 degree angle
- Making the labels responsive in chart js
- Changing x axis labels in Chart.js line chart
- How to align Chart.JS line chart labels to the center
- How to display the labels in doughnut chart using ng2 charts?
- ChartJS: Show all labels of a mixed chart in the tooltip
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- ChartJS: Remove padding to the right of chart caused by tick labels
- Modify the labels in chart.js when I update the chart
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- Pie chart isn't loading, but the labels are
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Changing the label of chart
- Chart.js bubble chart changing dataset labels
- chart.js: How do I make the radar chart axis labels bigger?
- How to show the chartjs bar chart data values labels as text?
- Chart.js reduce canvas size without changing the size of the chart
- ChartJs(Java) Can I remove only specific gridLines for a Linear Chart withouth removing the labels on xAxis?
- How to add labels on top of the chart bar with Chart.js 2
- Angular-Charts bar chart does not update when I change the data, series, labels
- Modifying the X-Axis Labels of a Bar chart in Chart.js 2
- Chart js animating a line while changing x-axis labels
- How to display labels outside the pie chart border?
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- Is there a more optimized way to implement the change function of chart js upon changing the dropdowns?
- How to increase the spacing between labels and the chart
More Query from same tag
- Stacked bar chart with chartjs with included values
- Wrong display of xAxes in Chartjs
- ChartJS 2.7.0 updating and exporting as png
- How do you use user input as data values in chart.js?
- chartjs loading data from ajax doesn't work fine
- Looping variables or array
- ng2charts using borderColor with array value
- chart.js: alternating background-color for ticks
- Chart.js chart doesn't render when using Angular 2
- how to highlight stack bar in ChartJS with onclick
- In ng 2 chart during the load an undefined legend gets created automatically ,Is there any way to remove it?
- Cannot find module 'chart.js'
- Chart.js : how I can adjust Pie chart radius?
- Chartjs 2.5.0 -> Labels below the chart
- Horizontally align Chart.js y axes
- How can I trigger the hover mode from outside the chart with charts.js 2?
- ChartJS Email HTTP Request API
- angular-chartJs change chart background and highlight colors
- ChartJS 2.6 - Change color of bar in Bar chart programmatically
- y=0 gridline (or axis?) not showing in chart.js
- Chartjs populate data with Axios response
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- Angular 2 ng2-charts donut change segment color
- Why aren't my data points getting placed in the corresponding locations in my chart?
- Chart.js sum y values depending on time unit
- chartjs hover over data without hoveringing on line
- Creating Chart.js using API data in react
- ChartJs with try catch
- Charts in Angular js with JSON Object
- How create time line chat with selectable year dropdown