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
- Chartjs - Set start and end value into a Bar Chart
- Chart.js - cannot fetch result from MySQL via PHP
- Cannot get Chart.js working
- data from api not showing in chart.js (angular)
- Multiple datasets with one data value chartjs
- angular chart js type line setting chart-options not working
- Chart.js canvas cuts off doughnut stroke
- Dynamically create chart with Chart.js and PHP
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- Using ng2-charts, how to "zoom out"?
- Multiples values in yAxes with same xAxes
- Update Chart vue3-chart with new data
- 2 or more charts on same page?
- chart.js: alternating background-color for ticks
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Tooltip flickering when hovered on chart
- How to sum value by month and assign two different variables?
- chartjs align origin of the axis to the corner of graph
- Chart.js. Values in a big range. The smallest values are not available
- react-chart2: Cannot read properties of undefined (reading 'map')
- Chart.js: colouring tooltip labels
- facing problem to solve Uncaught TypeError while using chart js
- Chart.js — drawing an arbitrary vertical line
- How can I make small grid lines above ChartJS labels?
- chartjs height does not follow parent container
- How to make react-chartjs-2 responsive on mobile?
- Chartjs: How can I group datasets closer if I have maxBarThickness set?
- return percentage in chart.js (v2+) legend
- Ember.Computed is not a function