Skip to content

Commit

Permalink
docs: create rendering images page
Browse files Browse the repository at this point in the history
  • Loading branch information
epessine committed May 2, 2024
1 parent d43d214 commit dd87384
Showing 1 changed file with 43 additions and 0 deletions.
43 changes: 43 additions & 0 deletions docs/page/content/docs/rendering-images.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: "Rendering Images"
weight: 5
prev: /docs/using-with-livewire
---

You can also use Axis to render charts directly on the server as images - to use them on emails, notifications or exporting to external services. It uses the same syntax as client-side rendered charts, so all your charts are interactive and exportable!

### Requirements

Axis uses [Node](https://nodejs.org/en) and [Puppeteer](https://pptr.dev/guides/installation) under the hood, so both need to be installed and accessible to the system's webserver user.

### Usage

After creating your chart, you can call `toPng()`, `toWebp()` or `toJpeg()` to generate an screenshot of the chart and get it's contents. After that, you can save it on storage, for instance:

```php
class ExampleController extends Controller
{
public function __invoke(): View
{
$chart = Chart::chartjs()
->column()
->labels(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'])
->series('# of Votes', [12, 19, 3, 5, 2, 3], ['borderWidth' => 1])
->options(['scales' => [
'y' => ['beginAtZero' => true],
]]);

Storage::put('chartjs.png', $chart->toPng());
}
}
```

You can also set the Node binary path if needed:

```php
$image = $chart->setNodeBinary('/usr/local/bin/node')->toPng();

Storage::put('chartjs.png', $image);
```

It is _that_ easy!

0 comments on commit dd87384

Please sign in to comment.