chart.js

问题 This question already has answers here : Chart.js pie tooltip getting cut (6 answers) Closed 7 hours ago . I'm currently using chartjs (chartjs). Tooltip is cutted, because it go out of canvas. How I can fix this behavior? 回答1: There are multiple ways of solving this. One way (in your case) , you can solve this, is by setting the bottom padding for your chart layout , like so ... options: { layout: { padding: { bottom: 25 //set that fits the best } }, ... } ᴅᴇᴍᴏ var ctx = document

问题 I created a simple line chart using chart.js with 3 Y axes: https://codepen.io/anon/pen/dZVgKw As you can see, the last one is going from 10 to 20 without any number between. How can I set step size here? This is how I add an axe: { id: 'C', type: 'linear', position: 'left', ticks: { max: 10, min: 20, }, } Thanks. 回答1: How can I set step size here? Straight from the samples (Linear Scale, step size): By setting a stepSize value. scales: { xAxes: [{ display: true, scaleLabel: { display: true,

问题 I have a problem with the graphics of CHART.JS, and when I put the time interval of 2 years, some labels of the months overlap. And I want all the labels to appear, the time interval doesn't matter. var g = new Chart(ctx, { type: 'bar', data: { labels: labelsHeader, datasets: listData, }, options:{ maintainAspectRatio: false, } }); the graphic 回答1: Add the following under options: options: { scaleShowValues: true, scales: { xAxes: [{ ticks: { autoSkip: false } }] } } 回答2: Some of the

问题 I have a problem with the graphics of CHART.JS, and when I put the time interval of 2 years, some labels of the months overlap. And I want all the labels to appear, the time interval doesn't matter. var g = new Chart(ctx, { type: 'bar', data: { labels: labelsHeader, datasets: listData, }, options:{ maintainAspectRatio: false, } }); the graphic 回答1: Add the following under options: options: { scaleShowValues: true, scales: { xAxes: [{ ticks: { autoSkip: false } }] } } 回答2: Some of the

问题 I have a problem with the graphics of CHART.JS, and when I put the time interval of 2 years, some labels of the months overlap. And I want all the labels to appear, the time interval doesn't matter. var g = new Chart(ctx, { type: 'bar', data: { labels: labelsHeader, datasets: listData, }, options:{ maintainAspectRatio: false, } }); the graphic 回答1: Add the following under options: options: { scaleShowValues: true, scales: { xAxes: [{ ticks: { autoSkip: false } }] } } 回答2: Some of the

问题 I have a problem with the graphics of CHART.JS, and when I put the time interval of 2 years, some labels of the months overlap. And I want all the labels to appear, the time interval doesn't matter. var g = new Chart(ctx, { type: 'bar', data: { labels: labelsHeader, datasets: listData, }, options:{ maintainAspectRatio: false, } }); the graphic 回答1: Add the following under options: options: { scaleShowValues: true, scales: { xAxes: [{ ticks: { autoSkip: false } }] } } 回答2: Some of the

问题 min is not considered for StepSize. including fiddle - https://jsfiddle.net/4p93aew7/10/ var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 23, 15, 32, 33], borderWidth: 1 }, { label: '# of Points', data: [17, 11, 25, 18, 13, 37], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { min: 5, max: 40, stepSize: 8 } }] } } } var ctx = document.getElementById('chartJSContainer').getContext

问题 min is not considered for StepSize. including fiddle - https://jsfiddle.net/4p93aew7/10/ var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 23, 15, 32, 33], borderWidth: 1 }, { label: '# of Points', data: [17, 11, 25, 18, 13, 37], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { min: 5, max: 40, stepSize: 8 } }] } } } var ctx = document.getElementById('chartJSContainer').getContext

问题 min is not considered for StepSize. including fiddle - https://jsfiddle.net/4p93aew7/10/ var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 23, 15, 32, 33], borderWidth: 1 }, { label: '# of Points', data: [17, 11, 25, 18, 13, 37], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { min: 5, max: 40, stepSize: 8 } }] } } } var ctx = document.getElementById('chartJSContainer').getContext

问题 min is not considered for StepSize. including fiddle - https://jsfiddle.net/4p93aew7/10/ var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 23, 15, 32, 33], borderWidth: 1 }, { label: '# of Points', data: [17, 11, 25, 18, 13, 37], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { min: 5, max: 40, stepSize: 8 } }] } } } var ctx = document.getElementById('chartJSContainer').getContext