leeoniya / uPlot

📈 A small, fast chart for time series, lines, areas, ohlc & bars
MIT License
8.48k stars 370 forks source link

Change grid.stroke color #911

Closed bck01215 closed 3 months ago

bck01215 commented 3 months ago

I was looking through old commits and looks grid.stroke used to be an option that could be used I have these opts

           const opts = {
                height: 250,
                width: this.$refs.uplot.clientWidth,
                padding: [20, 20, 0, 0],
                ms: 1,
                scales: {
                    y: {
                        min: 0,
                        max: c.series.length,

                    },
                },
                axes: [
                    {
                        space: 80,
                        stroke: 'red',

                        font,
                        values: [
                            [60000, "{HH}:{mm}", null, null, "{MMM} {DD}", null, null, null, 0],
                            [1000, "{HH}:{mm}:{ss}", null, null, "{MMM} {DD}", null, null, null, 0],
                        ],
                    },
                    {
                        scale: 'y',
                        font,
                        stroke: 'red',
                        gap: 0,
                        size: 60,
                        splits: [0, ...c.series.map((_, i) => i + 1)],
                        values: ['0', ...c.series.map(s => s.name)],
                    },
                ],
                series: [{}, ...c.series.map(() => ({ paths: hm, alpha: 0 }))],
                cursor: {
                    points: { show: false },
                    y: !!this.selection,
                    drag: { setScale: false, x: !!this.selection, y: !!this.selection },
                    bind: {
                        dblclick: () => () => null, // avoid some strange collapse of the y-axis
                    },
                    lock: true,
                },
                legend: { show: false },
                plugins: [
                    this.$refs.tooltip.plugin(),
                    this.selectionPlugin(),
                ],
            };
            this.ch = new uPlot(opts, [c.ctx.data, ...c.series.map(s => s.data)], this.$refs.uplot);

could you clarify how I can override the default grid stroke color?

bck01215 commented 3 months ago

In each axes object add

                        grid: {
                            stroke: 'red',
                        },
                axes: [
                    {
                        space: 80,
                        stroke: 'red',
                        grid: {
                            stroke: 'red',
                        },
                        font,
                        values: [
                            [60000, "{HH}:{mm}", null, null, "{MMM} {DD}", null, null, null, 0],
                            [1000, "{HH}:{mm}:{ss}", null, null, "{MMM} {DD}", null, null, null, 0],
                        ],
                    },