dimanche 27 janvier 2019

Chart JS Y-axis labeling

I have been working on a chart using chartjs that shows workout durations on each day.So the x-axis have dates and y-axis has duration,The dataset will have values Maximum duration is 1.30 and minumum is 0.00.I want y axis to show labels like 0.00,0.10,0.20...,1.20,1.30.

I could show the graph with labels as .1,.2 ... 1.3. and code is given below .

I could show the graph with labels as .1,.2 ... 1.3. and code is given below .

var options = { type: 'line', data: { labels: newDates.split(','),

                    datasets: [{
                        label: 'Time',
                        data: newDuration.split(','),
                        borderWidth: 1,
                        fill: false,
                        borderColor: "#fff"
                    }]
                },
                options: {
                    responsive: true,
              maintainAspectRatio: false,
                        title: {
                            display: true,
                        },
                  legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                    ticks: {
                      beginAtZero: true,
                      suggestedMax: 1.30,
                      stepSize: .10,
                      fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red
                   },
                            gridLines: {
                            color: 'rgba(255, 255, 255, 0.2)' // makes grid lines from y axis red
                            }
                        }],
                        xAxes: [{
                  ticks: {
                    beginAtZero: true,
                     fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red

                 },
                            gridLines: {
                                display:false
                            }
                        }]
                    }
                }
            }

            var ctx = document.getElementById('chartJSContainer').getContext('2d');
            new Chart(ctx, options);

Screenshot: https://drive.google.com/open?id=1sJet1j1-J_yr-z6oWvcDwEkY5DhSU1lT

Expected result :

y axis to show labels as 0 0.10 0.20 0.30 ... 1.20,1.30



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire