score:1
so, after a bit of trying i've found a solution that could be tailored perfectly for you needs.
var ctx = document.getelementbyid("mychart");
var mychart = new chart(ctx, {
type: 'bar',
data: {
labels: getpreviousmonths(),
},
options: {
responsive: true,
title: {
display: true,
text: 'chiffre d\'affaire - année 2018'
},
scales: {
xaxes: [{
type: 'time',
time: {
unit: 'month'
},
scalelabel: {
display: true,
labelstring: 'date'
}
}],
yaxes: [{
scalelabel: {
display: true,
labelstring: 'value'
}
}]
}
}
});
function getpreviousmonths() {
var months = [];
months = array.apply(0, array(12)).map(function(_,i){return moment().month(i).toisostring()})
return months;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="mychart"></canvas>
this is the same function you had but uses the function moment().month()
that returns an array of months and it formats it with the format you wanted. (it shows only half months in this snippet because it can't extent through the entire page and cuts half months, should work on a full window)
i really don't understand why your code was not working, i guess something happens when you reverse the order but anyway this should work. cheers!
=== edit ===
as suggested in the comments, the formatting was removed and was added the function toisostring()
. this is because before, the date was getting transformed to a jsdate which is not supported by all browsers.
Source: stackoverflow.com
Related Query
- charts.js show dates 1 year
- ChartJS x-axis show only months of year
- charts are not being show with wicked_pdf
- chartjs plugin datalabels does not show value on charts
- How to show dynamic dates with month name of current month and previous month in momentjs?
- how to show labels in laravel charts when the name of the label is on another table?
- How to show Nested charts Radar chart within Doughnut Chart?
- Show multiple charts at HTML page?
- Show Dates in x-axis when using chart.js
- My ChartJS dates don't show up correctly from coinranking API
- Display Charts based on year select in django
- How to show tooltip only for show x values in react charts
- How to show all dates on xAxis between two dates in chart.js
- How to show different tooltips on charts (in columns)?
- Chart.js - Multiple bar Charts - Only Show Last Chart
- Chart.js canvas rendered by ng-repeat does not show charts
- How to extend chartjs line charts in ReactJS to show solid and dashed line together?
- Angular ChartJs does not show Data for multiple Charts
- Chart.js x-axis time doesn't show values when using combined (mixed) charts
- chart.js show no charts in IE11
- How to run Chart.js samples using source code
- chart.js charts wouldn't show or hide with Angular directives ng-show and ng-hide
- how to not repeat code while creating multiple charts in chart js
- ChartJS Line Charts - remove color underneath lines
- Click events on Pie Charts in Chart.js
- Chart.js Show labels on Pie chart
- Chart Js Change Label orientation on x-Axis for Line Charts
- Show values on top of bars in chart.js
- ChartJS: datalabels: show percentage value in Pie piece
- Chart.js creating a line graph using dates
More Query from same tag
- Loop to create lines for graph chartjs
- what is output format of Utils? (using chartjs in vanillajs, not react/angular)
- ChartJs bar chart bar value displaying lower then Y axis value in pdf?
- Rendering charts using local Chart.js in overriding Django templates
- return array from ajax
- Can I set different fill color based on a given threshold in Chart.js?
- Chartjs Legend Styling
- Drawing pie segment percentage in middle of doughnut with chartjs issue
- Reproduce Error in Chartjs v2 Polar chart not plotting all supplied data
- Working with multiple date axes in ChartJS
- Displaying Chart with data retrieved from Entity Framework in Controller
- Price history with chart js
- Draw a Chart.js with data retrieved through ajax call
- Why is there an error in ChartJs.Blazor (change in ASPNETCORE_ENVIRONMENT)
- Set fixed label size for grouped bar chart in angular Chartjs
- Strange "padding" at chart area after updating chart.js (2.8.0 -> 3.4.1)
- Creating mathematical charts using chart.js jQuery
- Chart js adding number
- How to update chart.js on websocket event?
- Providing server side data for Chart.js charts
- Disable tooltip for Line chart for one line
- Completely hide the Y-axis on chartjs when data is hidden
- Q: Chart.js v2 - x-axis time scale configuration
- Python to chart.js
- Change section element every 20 seconds
- ChartJS non overlapping lines
- Using CHARTJS with a JavaScript Array
- Canvas not working in jQuery Mobile
- Changing line color below specific value in Chart.js
- Changing the Y axis unit in Chartjs