score:0
Accepted answer
that was the good solution but doesn't work with char.js 2.8 i use 2.7
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.bundle.min.js"></script>
<canvas id="nbticketschart" width="50" height="50"></canvas>
<script>
var nbcanvas = document.getelementbyid("nbticketschart");
chart.defaults.global.defaultfontfamily = "lato";
chart.defaults.global.defaultfontsize = 18;
var densitydata = {
label: 'nombre de tickets sur la semaine',
data: [20, 25, 30, 25, 30, 35, 40],
backgroundcolor: '#336ca6'
};
var barchart = new chart(nbcanvas.getcontext('2d'), {
type: 'bar',
data: {
labels: ["j-1", "j-2", "j-3", "j-4", "j-5", "j-6", "j-7"],
datasets: [densitydata]
}});
barchart.options.scales.yaxes[0] = {ticks: {min: 0, max: 100, stepvalue: 20}}
</script>
score:1
this just frustrated me a fair bit. according to the documentation it seems your method should be working. i can only make it work by setting the scale after creating the chart, like below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.bundle.min.js"></script>
<canvas id="nbticketschart" width="50" height="50"></canvas>
<script>
var nbcanvas = document.getelementbyid("nbticketschart");
chart.defaults.global.defaultfontfamily = "lato";
chart.defaults.global.defaultfontsize = 18;
var densitydata = {
label: 'nombre de tickets sur la semaine',
data: [20, 25, 30, 25, 30, 35, 40],
backgroundcolor: '#336ca6'
};
var barchart = new chart(nbcanvas.getcontext('2d'), {
type: 'bar',
data: {
labels: ["j-1", "j-2", "j-3", "j-4", "j-5", "j-6", "j-7"],
datasets: [densitydata]
}});
barchart.options.scales.yaxes[0] = {ticks: {min: 0, max: 100, stepvalue: 20}}
</script>
in posting this i've also noticed it doesn't work when the canvas size is 400 by 400. 50 by 50 seems to work...
Source: stackoverflow.com
Related Query
- Min value of chart (Chart.js)
- getting additional value fields from data source for dx.chartjs doughnut chart
- Chart JS: Bar Chart to have min Length as value range is too big
- How to set max and min value for Y axis
- How to display value of only one datapoint in line chart
- get yLabel value onclick chart js
- Obtain max value of y axis of line chart rendered with Chart.js
- Remove the label and show only value in tooltips of a bar chart
- How to create single value Doughnut or Pie chart using Chart.js?
- Map event position to y axis value in chartjs line chart
- Drawing line chart in chart.js placing dots only when value changes
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- chart.js bar chart color change based on value
- Chart JS display Data Value on the top of the Bar
- Angular chart how to show the legend data value by default along with legend name
- How to hide value in Chart JS bar
- How to access or get value of specific graph on chart plot by click event?
- Chart.js xaxis formatter changes the value shown in the chart
- react chart js skip zero value month
- Chart.js stacked bar chart - sorting values in bar by value
- Mark X value on Chart Js graph
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chartjs - Set start and end value into a Bar Chart
- How to use segment property to color line / border color based on value in chart js?
- How to add null value rows into pandas dataframe for missing years in a multi-line chart plot
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- Chart only prints out first value using jquery ajax php
- how to add percentage value to legend field in pie chart using chart.js
- How to sort XY line chart tooltip items based on value and add thousands separators?
More Query from same tag
- Show label for every data point in line chart
- chartjs chart spilling out of container
- labelling the pop up Chart js
- Update ChartJS with MySQL Data
- Is there a way to insert multiple lines, with labels, dynamically, into a ChartJS Line chart?
- How to filter react-chartjs-2
- how to use vuechartkick in nuxt js
- How to display data with percentage from database in pie chartjs?
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- Bold text inside doughnut chart (chart.js)
- Chart.js turn off all y axis and toggle them on / off
- Can't use a chart module with angularjs
- angular-chart add horizontal line
- Chartjs Graph is not showing in colorbox
- Wrong label value is displayed on point hover - Chart.JS
- Setting up min and max in chartjs did not work
- Vue pie chart show after a while (like show console with a warning)
- Chart.js (Radar Chart) different scaleLineColor for each scaleLine
- Ticks for the minimum and maximum values in a Chart.js v2 axis
- How to dynamically update Chartjs legend label colors?
- React with chart js, labelling problems in multiple datasets for doughnut chart
- Why chartJs throws length of undefined although everything seems correct
- 'filter' function for chart.js legend labels never being called
- Uncaught TypeError: Cannot read property 'draw' of undefined
- hh:mm in chart.js on X-axis and text labels on the Y-axis
- chart.js line chart and "correct" spacing between points? (i.e. horizontal position based on percent of width, not fixed)
- Chart.Js - Specify x labels to be displayed that is not possible with stepSize option
- ChartJS customize left and bottom axe border
- Pushing API Data into Chart.js
- What is the syntax for require.config for chartjs-plugin-streaming and dependencies using RequireJS?