All of my view charts using the Chart.js library (Column graphs) are displaying correctly, but the Y axis minimum is always set to the lowest figure. I need the Y axis to begin at zero (0).

There is an option in Chart.js beginAtZero: true;.

How do I implement this in with my views?

I've already tried going to Format: Chart > Settings > Vertical Axis and adding a Minimum and Maximum value for Value range. This has no affect.

Comments

Spanners created an issue. See original summary.

andileco’s picture

You'd need to

1) add to/patch one of the classes here (https://cgit.drupalcode.org/charts/tree/modules/charts_chartjs/src/Setti...) or create a new one, and
2) use the override feature, as described here: https://cgit.drupalcode.org/charts/tree/starterkits/charts_overrides/REA...

This is how the module currently keeps a pretty minimal settings form that (mostly) works for all the charting libraries while still giving room for all the options provided by the respective APIs.

Please let me know if this helps!

visualsbysina’s picture

Hello, I'm having the same exact problem, and after following the instructions you provided I have not been able to get any options to pass into chartjs. I tried the starterkit method extensively to no luck. I even tried overriding the chartjs library to bypass the module and pass my options directly, but I can't get anything to show up. Any help would be greatly appreciated. It seems that I can't modify the chart at all, only barely through the views interface.

andileco’s picture

I'd be glad to try to help. Can you include some of the code you've used?

andileco’s picture

OK, I took a better look at this. Please try this patch. I wrote it for 8.x-4.x, but I think it will still apply on 3.x. Let me know if what I did in this patch makes sense. I tested the patch by modifying line 24 of the new file, ChartjsTickConfigurationOptions.php, to 2, and I saw that the number of ticks reduced to 2.

andileco’s picture

Uploading screenshots so you can see. If this works for you, I'll plan to commit. What you require may require at least an additional patch, which I'd be happy to apply.

Before:
Showing multiple y-axis ticks

Change to 2 in IDE:
Showing editing of maxTicksLimit to 2

After:
Showing only 2 ticks on y-axis now

andileco’s picture

After applying the patch in #5, I could replicate what you see in #6 with changing ChartsOverridesChartjs.php to:

<?php

namespace Drupal\charts_overrides\Plugin\override;

use Drupal\charts_chartjs\Plugin\override\ChartjsOverrides;

/**
 * Defines a concrete class for a Billboard.
 *
 * @ChartOverride(
 *   id = "charts_overrides_chartjs",
 *   name = @Translation("Chart.js Overrides")
 * )
 */
class ChartsOverridesChartjs extends ChartjsOverrides {

  public function chartOverrides(array $originalOptions = []) {

    $options = [];
    $options['options']['scales'] = [
      'yAxes' => [
        [
          'ticks' => [
            'maxTicksLimit' => 2,
          ],
        ],
      ],
    ];

    return $options;
  }

}
visualsbysina’s picture

Wow, thank you so much Andileco! I was out yesterday and was just about to post what we tried, but I will give your new updates a try first! Many thanks! Also, Nick G and Stan A say hello!

andileco’s picture

Hi, y'all! Looking forward to hearing more.

  • andileco committed 15d98ed on 8.x-4.x
    Issue #3018104 by andileco: Chart.js how to set beginAtZero to TRUE
    
andileco’s picture

Status: Active » Fixed

Went ahead and added the patch

  • andileco committed e25ad1b on 8.x-3.x
    Issue #3018104 by andileco: Chart.js how to set beginAtZero to TRUE
    

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.