CODEWITHSUNDEEP
javascriptphpcsswkhtmltopdfamcharts
Sebastian L
Sebastian L

Reputation: 924

How can I change the stroke-width property of an AmChart graph?

I am generating a report using AmCharts graphs and it works great. The problem comes when I am converting the page to pdf and I get black strokes around each charts' frame. When I check the html I find things like:

<path cs="100,100" d="M0.5,0.5 L609.5,0.5 L609.5,549.5 L0.5,549.5 L0.5,0.5 Z"
fill="#FFFFFF" stroke="#000000" fill-opacity="0" stroke-width="1" stroke-
opacity="0" transform="translate(10,0)"></path>

I can edit line opacity and line color and it works in html but when I use wkhtmltopdf to convert to pdf these are ignored and I get black strokes around each chart. What can I do to avoid this?

Upvotes: 2

Views: 2743

Answers (1)

martynasma
martynasma

Reputation: 8595

What you're seeing there is a chart background element. It's not seen on screen because it has as a zero opacity by default. I'm not too familiar with wkhtmltopdf (I'm using PhantomJS which does not have that problem) so I'm not sure why it shows border around the background if the opacity is 0, however there is a tricks you could try.

First of all we will need to enable class name application to chart elements, using addClassNames property.

AmCharts.makeChart( "chartdiv", {
  ...
  "addClassNames": true,
  ...
} );

The SVG node in question will then have a class="amcharts-bg" attached to it. Now you can target it via CSS:

.amcharts-bg, .amcharts-plot-area {
  stroke-width: 0!important;
}

Or outright simply hide the whole background if you're not using it anyway:

.amcharts-bg, .amcharts-plot-area {
  display: none;
}

I hope this is enough to work around the wkhtmltopdf issue.

Upvotes: 2

Related Questions