Drupal 8 - Canvas element is getting removed from the page

user_1060292 0
Viewed 617

I am new to Drupal 8. I am trying to implement Chart js in Drupal 8.

I am trying to create a <canvas> element to load the chart. But while rendering the page, <canvas> element is getting removed automatically.
Below the controller code.

class DashboardController extends ControllerBase {

  public function content() {

    return array(
        '#type' => 'markup',
        '#markup'   =>  '<div class="chart"><canvas id="test"></canvas></div>',
    );
  }
}

Here, I am getting only <div class="chart"></div>

I am unable to find the canvas in the page. Because of that, chart is not getting loaded.

Anyone help me to figure out the exact problem.

drupal-modules drupal
3 Answers

Apologies for the late answer but having stumbled upon this issue myself, there are two "correct" ways of doing this.

From Render API overview:

#markup: Specifies that the array provides HTML markup directly. Unless the markup is very simple, such as an explanation in a paragraph tag, it is normally preferable to use #theme or #type instead, so that the theme can customize the markup. Note that the value is passed through \Drupal\Component\Utility\Xss::filterAdmin(), which strips known XSS vectors while allowing a permissive list of HTML tags that are not XSS vectors. (I.e, and are not allowed.) See \Drupal\Component\Utility\Xss::$adminTags for the list of tags that will be allowed. If your markup needs any of the tags that are not in this whitelist, then you can implement a theme hook and template file and/or an asset library. Aternatively, you can use the render array key #allowed_tags to alter which tags are filtered.

So you can either implement a theme hook or do something a bit less elegant:

use Drupal\Component\Utility\Xss;

class DashboardController extends ControllerBase {

  public function content() {

    return array(
        '#type' => 'markup',
        '#markup'   =>  '<div class="chart"><canvas id="test"></canvas></div>',
        '#allowed_tags' => array_merge(Xss::getHtmlTagList(), ['canvas', 'div'])
    );
  }
}
user_5711140
Related