Skip to content

Commit ca04427

Browse files
committed
Updated README
1 parent badbd7d commit ca04427

File tree

1 file changed

+40
-14
lines changed

1 file changed

+40
-14
lines changed

README.md

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -170,20 +170,21 @@ for each type of chart.
170170

171171
### All
172172

173-
| Method | Description |
174-
|--------|-------------|
175-
| setTitle(string $title) | Sets chart title |
176-
| setAnimated(boolean $animated) | Enables/disables animation |
177-
| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
178-
| withDataLabels() | Enables data labels |
179-
| withoutDataLabels() | Disables data labels |
180-
| withLegend() | Shows legends |
181-
| withoutLegend() | Hides legends |
182-
| setColors(array $colors) | Set colors for chart |
183-
| addColors(string $color) | Append $color to $colors set |
184-
| setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
185-
| sparklined() | Enables Apex Charts sparkline feature |
186-
| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
173+
| Method | Description |
174+
|-----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------|
175+
| setTitle(string $title) | Sets chart title |
176+
| setAnimated(boolean $animated) | Enables/disables animation |
177+
| setDataLabelsEnabled(boolean $enabled) | Enables/disables data labels |
178+
| withDataLabels() | Enables data labels |
179+
| withoutDataLabels() | Disables data labels |
180+
| withLegend() | Shows legends |
181+
| withoutLegend() | Hides legends |
182+
| setColors(array $colors) | Set colors for chart |
183+
| addColors(string $color) | Append $color to $colors set |
184+
| setXAxisCategories(array $categories) | Enables custom categories for chart X Axis |
185+
| sparklined() | Enables Apex Charts sparkline feature |
186+
| setSparklineEnabled(boolean $isEnabled) | Enables/Disables Apex Charts sparkline feature |
187+
| setJsonConfig(array $config) | Adds extra customization to charts by passing Apex charts properties keys and values. Nested keys must be added using dot (.) notation |
187188

188189
### LivewireLineChart
189190

@@ -256,6 +257,31 @@ inside your resources folder. You can then adjust imports as you see fit in your
256257

257258
>Note: You must remove @livewireChartsScripts directive so it doesn't clash with the scripts in your build system.
258259
260+
261+
## Advanced Usage - Custom Json Configs
262+
263+
The `setJsonConfig()` method on every chart allows adding custom Apex properties not provided first hand by the package.
264+
This means that any chart property supported by Apex chart can be passed down using this method.
265+
266+
```php
267+
$chart->setJsonConfig([
268+
'plotOptions.pie.startAngle' => -90,
269+
'plotOptions.pie.endAngle' => 90,
270+
'plotOptions.pie.offsetY' => 10,
271+
'grid.padding.bottom' => -180,
272+
]);
273+
```
274+
275+
>Note: If you want to add nested properties, you can use dot (.) notation for this matter.
276+
277+
You can even pass down simple JS functions. For example, for formatting you can pass down your own closure
278+
279+
```php
280+
$chart->setJsonConfig([
281+
'tooltip.y.formatter' => '(val) => `$${val} million dollars baby!`'
282+
])
283+
```
284+
259285
## Troubleshooting
260286

261287
Chart components must be placed inside a container with fixed height. This is because the chart will use all the given

0 commit comments

Comments
 (0)