Override Font size

Just an update to my question; I used following option to override the font size in my theme .js file.
Chart.defaults.font.size = 18;
Chart.defaults.font.weight = 500;
Chart.defaults.font.family = "Open Sans";
Chart.defaults.color = "#000000";

Still trying to figure out how to reduce the width of the each legend.

Sorry for the delay. You could do something like this in the .module file of a custom module named my_module:

/**
 * Implements hook_chart_alter().
 */
function my_module_chart_alter(array &$element, $chart_id) {
  $element['#raw_options'] = [
    'options' => [
      'plugins' => [
        'title' => [
          'font' => [
            'size' => 20,
            'weight' => 500,
            'family' => 'Open Sans',
          ],
          'color' => '#000000',
        ],
        'legend' => [
          'labels' => [
            'font' => [
              'size' => 20,
              'weight' => 500,
              'family' => 'Open Sans',
            ],
            'color' => '#000000',
          ],
        ],
      ],
    ],
  ];
}

@mhentry please let us know if the example above helped you. In the meantime I will go ahead and close this issue.

Hi there, I just wanted to reply to this issue as the original user never replied to confirm whether or not this works.

I tried the hook alter with the raw options and this unfortunately did not work for me. What did work for me is:

function my_module_chart_alter(array &$element, $chart_id) {
  $element['#title_font_size'] = 20;
  $element['#title_font_weight'] = 'bold'; // Adjust font weight as desired
  $element['#title_color'] = '#004B78';
}

I am not sure if this is the right way to do it, but it did work for me. I am also not sure what would need to change for the #raw_options method in order for it to work.