score:2
i think you've pretty much got it as is, just one configuration issue in the options
object.
you currently have these options:
options: {
title: {
display: true,
text: 'wetterdaten'
},
yaxes: [{
ticks: {
stepsize: 10
}
}]
}
but what is missing, is that the yaxes
array property has to be inside of a scales
object. like this:
options: {
title: {
display: true,
text: 'wetterdaten'
},
scales: {
yaxes: [{
ticks: {
stepsize: 10
}
}]
}
}
with this config in options
your stepsize property will kick in and the top of the graph will be 20 when showing just the temperature data.
but
now that the stepsize for the entire yaxis is 10
, the pressure dataset goes way out of wack. so for this problem, you could implement two yaxes, where the pressure data is on the right yaxes and everything else is on the left yaxes:
var weathercanvas = document.getelementbyid('weatherchart').getcontext('2d');
var weatherchart = new chart(weathercanvas, {
type: 'line',
title: 'wetter',
data: {
labels: ["01-01", "02-01", "03-01", "04-01", "05-01", "06-01", "07-01", "08-01", "09-01"],
datasets: [{
label: 'temperature[°c]',
data: [14, 18, 18, 16, 14, 11, 11, 11, null],
bordercolor: "rgb(252, 74, 74)",
yaxisid: 'left-y-axis'
}, {
label: 'windspeed[km/h]',
data: [14, 18, 18, 16, 14, 11, 11, 11, null],
bordercolor: "rgb(101, 219, 255)",
hidden: true,
yaxisid: 'left-y-axis'
}, {
label: 'humidity[%]',
data: [84, 88, 88, 86, 74, 71, 71, 71, null],
bordercolor: "rgb(101, 155, 255)",
hidden: true,
yaxisid: 'left-y-axis'
}, {
label: 'pressure[hpa]',
data: [1193, 1211, 1211, 1200, 1999, 1997, 1995, 1993, null],
bordercolor: "rgb(211, 211, 211)",
hidden: true,
yaxisid: 'right-y-axis'
}]
},
options: {
title: {
display: true,
text: 'wetterdaten'
},
scales: {
yaxes: [{
id: 'left-y-axis',
position: 'left',
ticks: {
stepsize: 10
}
}, {
id: 'right-y-axis',
position: 'right',
ticks: {
stepsize: 100
}
}]
}
}
});
here is a reference to axes configuration with a few examples as well.
i hope this helps.
score:1
a very recent fix is shown here.
you'd have to manually edit your chart.js file src/controllers/controller.line.js
(for angular 2, this file path will be located inside directory node_modules/chart.js/
.)
or just wait for the next chart.js release which will most likely contain the fix.
an alternative workaround is described in comment 1 of this bug ticket: https://github.com/chartjs/chart.js/issues/4202
note that i posted the same comment to an identical question (though not for angularjs): https://stackoverflow.com/a/47306019/3061684
Source: stackoverflow.com
Related Query
- ChartJS Line chart cut off at the top and bottom
- Chart.js line chart is cut off at the top?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- chartjs - top and bottom padding of a chart area
- Points cut at half at the edges of top and bottom, at chartjs
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- ChartJs multiaxis chart show different label bottom and top
- How do you create rounded corners on the top and bottom of a bar chart and the between 2 part still draw like image?
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Add a custom label to the top or bottom of a stacked bar chart
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJS line chart drag and zoom
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- High and low points on chart getting cut off
- ChartJs - Double tooltip Top and Bottom on hover
- How to change the label and grid line position on a timeseries chart in Chart.js 3?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to reduce the number of points shown on line chartjs chart with a large dataset?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- How to add space to the bottom of the chart in chartjs [angular]
- Chartjs draw line chart where line go back and forth (by chronological order)
- plot a point on top on line chart in chartjs
- How to get rid of the line on top of every point on a line chart (Chart.js)
- How to plot a line chart which has both the start and points outside the canvas area using Chart.js
- how to write labels along with data on top and bottom of each stack in bar chart
- Chart js cut the title and the legends
More Query from same tag
- React and chart.js with json
- ng2-charts - Tolltip color dont match line color
- In rails Label X and Y axis in chart. Implemented through chartkick and chart.js
- Chart.js load new data
- ChartJS custom tooltip doesn't render background on labels (only the title)
- How to allow copying of text within Chart.js tooltips?
- Chart.js with plotting durations against dates
- Chart.js doesn't animate on first load
- javascript : extrapolate an array of numbers
- Script won't run from ejs file in nodejs application
- Time scale formatting issues with chartjs, mostly unitStepSize
- Chart.js – Line Chart Tooltip Labels
- Programmatically open and close Chart.js tooltip
- why Graph is not showing until i minimize window. (using chart.js )
- Chart.js doubles in size each time user scrolls to it
- How do I make my Type:Time to work with my Line Chart?
- How to show stacked and unstacked bar graphs together in Chart.js
- Update charts in chartjs and angular
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- Puppeteer and PDF generation with canvas
- Chart.JS add dataset from hidden input
- (chart.js v3.5.1) change bar background, label font color on click
- Chart.js : How I change the x axes ticks labels alignment in any sizes?
- How to add padding to the vertical scale (X-axis) in Chart.js?
- How to disable a tooltip for a specific dataset in ChartJS
- chart.js how do we extract clicked var?
- How to remove header square from chart.js?
- Creating multiple charts and selecting them later
- How can I show Bootstrap modal when on click in individual bars in chart.js
- Dashboard grid - Chart.JS and CSS- issue widening two small horizontal bar graphs - noob question