score:1
the link https://www.chartjs.org/docs/latest/developers/updates.html has pretty up to date information. the keey is to recognise what the chart object is. :) i struggled for half a day reading various pages until i found the right way
- use the basechartdirective to access the chart directly by doing this -> this.chart
- to update scales do this:
var barchartoptions = { legend: { display: true }, scales: { yaxes: [{ id: 'yaxis', type: 'linear', position: 'left', ticks: { min: 0, max: maxscale } }]} }; this.chart.chart.options = barchartoptions;
- then update the chart:
this.chart.chart.update();
you can pretty much update everything. just need to realise what the chart object means in this page: https://www.chartjs.org/docs/latest/developers/updates.html :)
score:5
this is my solution for line chart.
you can use 'beforefit' callback function that you can find here in the docs http://www.chartjs.org/docs/latest/axes/
- in scale.chart.config.data.datasets you have the chart dataset
- you must set the scale.options.ticks.max
example:
scales: {
yaxes: [{
beforefit: function (scale) {
// see what you can set in scale parameter
console.log(scale)
// find max value in your dataset
let maxvalue = 0
if (scale.chart.config && scale.chart.config.data && scale.chart.config.data.datasets) {
scale.chart.config.data.datasets.foreach(dataset => {
if (dataset && dataset.data) {
dataset.data.foreach(value => {
if (value > maxvalue) {
maxvalue = value
}
})
}
})
}
// after, set max option !!!
scale.options.ticks.max = maxvalue
}
}
i hope i've been helpful.
score:13
found the solution myself.
to change any options of the chart:
mybar.config.options
in my case
mybar.config.options.scales.yaxes[0].ticks.max = newvalue
after this you have to call
window.mybar.update();
Source: stackoverflow.com
Related Query
- how to update chartjs2 option (scale.tick.max)
- Chart.js how define max tick of polarArea?
- How to run Chart.js samples using source code
- How to set max and min value for Y axis
- How to format x-axis time scale values in Chart.js v2
- How do I prevent the scale labels from being cut off in chartjs?
- How to prevent first/last bars from being cut off in a chart with time scale
- ChartJS: How to set fixed Y axis max and min
- How to use percentage scale with Chart.js
- How to make integer scale in Chartjs
- chartjs : how to set custom scale in bar chart
- How to assign a logarithmic scale to y axis in chart.js?
- Chartjs: how to show only max and min values on y-axis
- How to add padding to the vertical scale (X-axis) in Chart.js?
- How to set time scale zoom in ChartJS?
- ChartJS -- How do I change scale color when I have to scales?
- How to update data Chart in async way in Angular Chart.js?
- Chartjs: How to create padding between ticks and scale label
- How can I sort, insert in between and update full dataset in chartjs?
- How to add ChartJS code in Html2Pdf to view image
- ChartJS How to set max labels for X axis?
- Chartjs in Reactjs - how can I update data dynamically?
- How to define chart.js time scale date formats
- Chartjs v2.5 - only show min and max on scale, absolute positioning on scale
- How do I force Chart.js axes min and max with react-chartjs-2?
- How to Create Chart.JS Bar Graph with Min, Max & Average
- dynamically update the scale type of chartjs graph
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- chart.js how to show tick marks but hide gridlines
- How to show scale labels and set min/max for yAxes?
More Query from same tag
- .destroy() generating error 'window.myChart.destroy()' is not a function
- How to display pie slice data and tooltip together using chart.js
- Cannot find module 'chart.js'
- How to update a chart using VueJS and ChartJS
- Modify the information box of the scatter chart in Chart.JS
- How to enable zoom plugin using Chart JS?
- My charts doesn't work after inserting X-axis
- Making chartjs scrollable on the x-axis
- Hide label on slice of Doghnut/Pie Chart Angular ng2-charts
- Chart.js v3.60 - Add % symbol to the end of the tooltip label on a doughnut chart?
- Can not read property 'Concat' of Undefined
- how to use chartjs graph in a *ngFor loop
- Chartjs Array.join
- My chartJS axios.get is fired twice causing chart to render twice too and i don't know why. I'm using react-chartjs-2
- Chart.js Line chart Option does not disable gridlines
- multiple horizontal bar charts to display in same row
- Using Javascript with MPDF
- live update ecg chart with python and flask
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- how to decrease white space of a card containing pie-chart in mobile view
- Can't change the time of the xAxes in the Chart.js
- Specific grid line in X axis in ChartJs
- How to use generated HTML legends to enable or disable datasets in Chart.js
- How to make the whole <canvas> element in Chart.js V3.7.0 display cursor as pointer on hover?
- Space between start and end of axis
- Bar Chart Not Stacking When Using ChartJs
- Chart.js dinamically populate data in Oracle Application Express
- Unable to make y-axis to begin at zero on Charts.js v2.1.4
- How remove duplicates xAxis labels and show all values on chart
- charts.js chart size it's diferente than container setted size