'Chart.js how to use scriptable options

I am migrating chart.js to 3.x as per the migration guide.
https://www.chartjs.org/docs/master/getting-started/v3-migration/

I am trying to set the xAxis zeroLineColor to "#FFFFFF" and I want to have the Grid line color as "#00FFFF" but as per the chart.js migration document document scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead.

I am not sure how to use scriptable scale options for setting the xAxis line zero to white.

Update:
Working example:
https://jsfiddle.net/g4vq7o2b/2/

chart.jschart.js2chart.js3


Solution 1:[1]

Using chart_v3.7.0.js cartesian time axis, for me, configuring zeroline and other gridlines works, using scriptable options. Apply property for "context.tick.value == 0" (=baseline) like: ...

options: { 
            scales: {

            
                x: {    
                        gridLines: {
                          color: "#00ff00",
                        },
                        ticks: {        font: { size: 30    },
                                        maxRotation: 90,
                                        minRotation: 90,
                                },
                        type: 'time',       
                        time: {
                                /*tooltipFormat: "DD.MM hh:mm",*/
                                displayFormats: {
                                    minute: 'HH:mm',
                                    hour: 'HH:mm',
                                    day: 'dd.MMM',
                                }
                        },
                },
                            
                y: {    
                        grid: {
                            color: (line) => (line.index === 0 ? 'red' : 'rgba(0, 0, 0, 0.1)') //color of lowest horizontal grid line
                            color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF", // zero-line baseline color
                            lineWidth: context => context.tick.value == 0 ? 3 : 1, // zero-line baseline width
                        },
                        position: 'right', // show axis on the right
                        title: {        display: true,
                                        rotation: 0,
                                        text: "°C",                 }, 
                    },
                                        
            },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 El Gigante

Related Questions