score:1
you can try something like:
@Component({
selector: 'chart-doughnut',
template: `<p-chart type="bar" [data]="data" [options]="chartOptions"></p-chart> `
})
export class DoughnutChartComponent implements OnInit {
data: any;
public chartOptions = {
scales: {
yAxes: [{
ticks: {
stepSize: 10,
beginAtZero: true
}
}]
}
}
constructor() {
this.data = {
labels: ['January', 'February', 'March'],
datasets: [
{
"label":"% Cases/Status",
"data":[
20, 30, 50
],
"fill":false,
"backgroundColor":[
"#FF0000",
"#FFFF02",
"#008000",
],
"borderWidth":1
}
],
}
}
ngOnInit() {
}
}
check DEMO
score:2
Since primeNg just implements the Chart.JS library, you can use your normal chartjs options, so to add for instance percentage signs to each step of the Y axos, you can do :
chartOptions = {
scales: {
yAxes: [
{
ticks: {
callback: (label, index, labels) => {
return label + '%';
}
}
}
]
}
}
Then pass that class variable as options to the primeng chart component like this : <p-chart type="bar" [options]="chartOptions" [data]="data"></p-chart>
.
Thus anything else you wanna add, you can read chartjs documentation/ chartjs related questions since they will apply to primeng.
score:2
Try this to set Y axis label
basicOptions: any = {
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: '% Cases/Status',
fontColor: '#757575',
fontSize: 12
}
}
]
}
}
Source: stackoverflow.com
Related Query
- PrimeNg bar chart how to show a label for the y-axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular
- show label in tooltip but not in x axis for chartjs line chart
- Chart JS show multiple data points for the same label
- How to show Y axis ticks for every point in the graph
- Remove the label and show only value in tooltips of a bar chart
- PrimeNg bar chart how do I hide the bar labels?
- How to show different product name for every bar in chart js
- How to use set the color for each bar in a bar chart using chartjs?
- How to show tooltip value of all data falling on the same axis in chart js?
- How do I get a different label for each bar in a bar chart in ChartJS?
- How to show the chartjs bar chart data values labels as text?
- How to remove the extra Y axis from a bar chart in chart.js
- How to show tick marks and labels with grid line for the specific one on the X axis with Chart.js?
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- 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 can i get the Chart JS Bar Graph Bar Label and Value on click?
- how to show bar chart for every product
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart js tooltip how to control the data that show
- Border radius for the bar chart in ChartJS
- How do I change the 'months' language displayed on the date axis in Chart JS?
- Grouping the object by key for Chartjs bar chart
- X-axis multiple colored label for bar chart using chart.js
- How to show thousand in k format for bar values in chart.js
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- How to make bar chart animation where all bars grow at the same speed?
More Query from same tag
- Ajax asynchronicity calls end function before inner loop function
- How to show lables just outside the the doughnut chart in Chartjs?
- How to update chart at the end of every for loop in Chart.js?
- Chartjs Tooltip Line Breaks
- How to build dynamic charts with Chart.js
- Chart JS not reloading in Partial View
- Show highest value untop of a bars when dataset is stacked (chartjs)
- Pausing Javascript animation on minimize
- Hide empty bars in Grouped Stacked Bar Chart - chart.js
- Annotations are not displayed in Chart.js
- ChartJs chart in typescript: Object is possibly undefined in useEffect
- Does iFrame have any events suitable for when a JavaScript & HTML page are embedded in modal(Bootstrap)
- Generate PDF from chart and table
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- create different labels for different data chart js
- Chartjs.org Chart only displaying in one page
- Graphing the timestamp and data from mysql
- Tooltip callbacks in line chart JS not working
- Remove padding from chartJs horizontal bar chart
- chartjs Asp.net MVC Remote Data
- React component wont re-render ChartJS chart with redux props
- Chart.js How to make more space between doughnut inside doughnut?
- Chartjs bar chart blurry when height is set
- angular-chartJs change chart background and highlight colors
- All the bar in bar chart stays at left with very little width
- In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- Cant pass variable for some reason? PHP
- PrimeFaces PolarArea Chart - GridLine Color Change
- ChartJS non overlapping lines