More Font Controls

[ThomJ130]

Describe the feature

I can barely read the titles in the legend, and I don't see any way to control either size or color of these titles.

Does this fix a problem? If so, specify.

This would fix problems with readability / accessibility.

Did you consider other alternatives?

No response

Screenshots and recordings

No response

[larssont]

There is a way to change the fonts, but it's a bit complicated and cumbersome if you have multiple charts. It would be great if we could update the defaults of all charts, the same you would when interacting with the Chart.js library directly.

More or less like this:

Chart.defaults.color = "#dcddde";
Chart.defaults.borderColor = "#444";
Chart.defaults.maintainAspectRatio = false;
Chart.defaults.elements.bar.borderWidth = 1;
Chart.defaults.elements.bar.hoverBorderWidth = 2;
Chart.defaults.plugins.title.display = true;
Chart.defaults.plugins.title.font = { weight: "normal", size: 20 };

This would make it so much easier to use charts through Dataview scripts. Perhaps introducing more plugin settings for defaults would be a decent way to accomplish it? Or at least exposing the options programmatically.

[sector101010]

I found you can set the font like this - you need to also set the 'family', otherwise it won't take hold:

                scales: {
                    x: {
                        ticks: {
                            font: {
                                size: 30,
                                family:'Arial',
                            }
                        }
                    },
                    y: {
                        ticks: {
                            font: {
                                size: 30,
                                family: 'Arial',
                            }
                        }
                    }
                }

[adamstorkbm]

I found you can set the font like this - you need to also set the 'family', otherwise it won't take hold:

                scales: {
                    x: {
                        ticks: {
                            font: {
                                size: 30,
                                family:'Arial',
                            }
                        }
                    },
                    y: {
                        ticks: {
                            font: {
                                size: 30,
                                family: 'Arial',
                            }
                        }
                    }
                }

Hi sector101010, could you please share where to insert the code to make it work?

[adamstorkbm]

There is a way to change the fonts, but it's a bit complicated and cumbersome if you have multiple charts. It would be great if we could update the defaults of all charts, the same you would when interacting with the Chart.js library directly.

More or less like this:

Chart.defaults.color = "#dcddde";
Chart.defaults.borderColor = "#444";
Chart.defaults.maintainAspectRatio = false;
Chart.defaults.elements.bar.borderWidth = 1;
Chart.defaults.elements.bar.hoverBorderWidth = 2;
Chart.defaults.plugins.title.display = true;
Chart.defaults.plugins.title.font = { weight: "normal", size: 20 };

This would make it so much easier to use charts through Dataview scripts. Perhaps introducing more plugin settings for defaults would be a decent way to accomplish it? Or at least exposing the options programmatically.

Hi larssont, could you please share where to insert the code to make it work?

[larssont]

There is a way to change the fonts, but it's a bit complicated and cumbersome if you have multiple charts. It would be great if we could update the defaults of all charts, the same you would when interacting with the Chart.js library directly. More or less like this:

Chart.defaults.color = "#dcddde";
Chart.defaults.borderColor = "#444";
Chart.defaults.maintainAspectRatio = false;
Chart.defaults.elements.bar.borderWidth = 1;
Chart.defaults.elements.bar.hoverBorderWidth = 2;
Chart.defaults.plugins.title.display = true;
Chart.defaults.plugins.title.font = { weight: "normal", size: 20 };

This would make it so much easier to use charts through Dataview scripts. Perhaps introducing more plugin settings for defaults would be a decent way to accomplish it? Or at least exposing the options programmatically.

Hi larssont, could you please share where to insert the code to make it work?

Those were simply suggestions on how I would want the configuration to work for obsidian-charts, but it is not possible to configure the fonts in that manner exactly (unless something has changed since last time I looked into this).

[adamstorkbm]

I see, thanks for your reply.