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
- ChartJS hover tooltip colors not showing their correct color
- charts are not being show with wicked_pdf
- Chart JS - Horizontal Bar Chart Not Filling Canvas
- Chart.update is not a function typeError
- The colors of the bar chart in chart.js is not showing. I tried background color and fill color but none of it worked
- Uncaught type error: mychart.update is not a function
- core.js:4197 ERROR TypeError: chart_js__WEBPACK_IMPORTED_MODULE_2__ is not a constructor
- Drawing pie segment percentage in middle of doughnut with chartjs issue
- Show Count on top of the bar graph - ChartJS
- How to install vue-chartkick and use it in my components?
- Creating datapoints on mouseclick Chart.js
- Chart.js changing the color of the max value bar
- Can I color the first bar in "Bart Char" differently?
- ChartJS color specific Grid Lines
- Can't parse data from json
- Changing tooltip color in Chart.js
- ChartJS, Disable Tooltip for one plot on a multi graph data
- ChartJs: Different Fill Colour Between Data Points
- Charts.JS Bars Not Alternating Color
- Customizing Chart.js troubleshoot
- Why wont the json_encoded data show
- How to get an attribute of element by jquery
- ChartJS Bar Chart not respecting disabled legend when using cdn
- Chartjs Overlap click function doesnt work
- How to get the X position at a specified chart item index?
- How to set up an initial Zoom value for a chart (ChartJS + ChartJS Zoom plugin)?
- ng2-charts - Angular 4 working example
- Chartjs different length of labels and datasets
- how to show bar chart for every product
- Django and Chart.js: Line-Chart with multiple Datasets