Customization

Change general chart colors schema

In your config/larapex-chart.php file, you can edit the colors array to customize the chart colors order.

'colors' => [
    LarapexChart::COLOR_OCEAN_BLUE,
    LarapexChart::COLOR_MINT_GREEN,
    LarapexChart::COLOR_AMBER_ORANGE,
    LarapexChart::COLOR_CORAL_RED,
    LarapexChart::COLOR_AMETHYST_PURPLE,
    LarapexChart::COLOR_CYAN_SKY,
    LarapexChart::COLOR_NAVY_BLUE,
    LarapexChart::COLOR_ROSE_PINK,
    LarapexChart::COLOR_ROYAL_BLUE,
    LarapexChart::COLOR_SILVER_GRAY,
    LarapexChart::COLOR_AZURE_BLUE,
    LarapexChart::COLOR_TEAL_TURQUOISE,
    LarapexChart::COLOR_PERIWINKLE_BLUE,
],

DANGER

The colors array only support hexadecimal values and as string, feel free to replace or add any hex color as string or add new constants to your own implementation that extends from LarapexChart Object.

Change chart colors dynamically

If the default config colors array does not reflect a specific need the package provides a method to add an array of colors on the fly:

return $this->chart->lineChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([4, 9, 5, 2, 1, 8], 'Published posts')
    ->addData([7, 2, 7, 2, 5, 4], 'Unpublished posts')
    ->setColors(['#ffc63b', '#ff6384'])
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

The setColors method accepts an array with hexadecimal colors as strings.

Monocrome Color Chart

Sometimes is useful eg: get a chart from a single team/user performance during a year

In this case adding more or less intensity in the color makes sense

return $this->chart->heatMapChart()
    ->setTitle('Code Push Activity')
    ->addData([5, 12, 8, 15, 23, 18], 'Week 1')
    ->addData([8, 15, 20, 12, 9, 25], 'Week 2')
    ->addData([12, 8, 14, 22, 17, 10], 'Week 3')
    ->addData([18, 22, 15, 11, 20, 16], 'Week 4')
    ->setMonochromeColor(LarapexChart::COLOR_MINT_GREEN)
    ->setXAxis(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']);

Customize Fonts

The default font in the package is Helvetica, but you can customize font family and font color:

return $this->chart->lineChart()
    ->setTitle('Delivery Activity')
    ->addData([5, 12, 8, 15, 23, 18])
    ->setFontFamily('Verdana, sans-serif')
    ->setXAxis(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']);

Customize Chart Grid

The setGrid() method is available for:

• Line Charts
• Area Charts
• Bar Charts

You can customize the style of the grid, here an example:

return $this->chart->areaChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setGrid();

By adding just the setGrid() method it adds a default style that would be enough in many cases, but you can even customize more the grid by passing some params:

return $this->chart->areaChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setGrid(color: '#3F51B5', opacity: 0.1, strokeDashArray: 10);

You can customize:

• The opacity with values from: 0.1 to 10

• The stroke dash grid using setGrid(strokeDashArray: 10) you can use any number between 1 to 10 to change the stroke dash

Hide Elements Option

You can remove:

• All the grids from a chart using setSparkline(false) method

• The legend (text below the chart) using setShowLegend(false) method

• The Y Axis Labels using setShowYAxisLabels(false) method

• The X Axis Labels using setShowXAxisLabels(false) method

return $this->chart->areaChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setSparkline(false)
    ->setShowLegend(false)
    ->setShowYAxisLabels(false)
    ->setShowXAxisLabels(false);

Customize Chart Markers

In this version you are able to customize the markers of every chart graph.

return $this->chart->areaChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setGrid('#3F51B5', 0.1)
    ->setColors(['#FFC107', '#303F9F'])
    ->setMarkers(['#FF5722', '#E040FB'], 7, 10);

Customize Data Labels

You can add labels on chart markers to show all the time the value of every series of data.

return $this->chart->areaChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setGrid('#3F51B5', 0.1)
    ->setColors([LarapexChart::COLOR_AMBER_ORANGE, LarapexChart::COLOR_PERIWINKLE_BLUE])
    ->setMarkers([LarapexChart::COLOR_CORAL_RED, LarapexChart::COLOR_OCEAN_BLUE], 7, 10)
    ->setDataLabels();

Set Y Axis

Sometimes is useful to change the default configuration of YAxis

You can change:

• min and max to change the amount of chart to show
• tickAmount increase or decrease the vertical space between scales
• show show or hide the YAxis scale

return $this->chart->lineChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setShowXAxisLabels(true)
    ->setGrid(color: '#3F51B5', opacity: 0.1, strokeDashArray: 10)
    ->setYAxis(min: 70, max: 70, tickAmount: 10, show: false);

Set X Axis

Sometimes is useful to change the default configuration of xAxis, the supported types are:

• categories
• numeric
• datetime

return $this->chart->heatMapChart()
    ->setTitle('Code Push Activity')
    ->addData([5, 12, 8, 15, 23, 18])
    ->addData([8, 15, 20, 12, 9, 25])
    ->addData([12, 8, 14, 22, 17, 10])
    ->addData([18, 22, 15, 11, 20, 16])
    ->setMonochromeColor(LarapexChart::COLOR_MINT_GREEN)
    ->setXAxis(categories: [
        '2026-01-01', '2026-01-02', '2026-01-03', '2026-01-04', '2026-01-05', '2026-01-06',
    ], type: 'datetime');

Stacked Charts

The setStacked() method is available for:

• Line Charts
• Area Charts
• Bar Charts
• Horizontal Bar Charts

Line chart stacked:

return $this->chart->lineChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([4, 9, 5, 2, 1, 8], 'Published posts')
    ->addData([7, 2, 7, 2, 5, 4], 'Unpublished posts')
    ->setColors(['#ffc63b', '#ff6384'])
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setStacked();

Area chart stacked:

return $this->chart->areaChart()
    ->setTitle('Sales during 2021.')
    ->setSubtitle('Physical sales vs Digital sales.')
    ->addData([40, 93, 35, 42, 18, 82], 'Physical sales')
    ->addData([70, 29, 77, 28, 55, 45], 'Digital sales')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setGrid()
    ->setStacked();

Bar chart stacked:

return $this->chart->barChart()
    ->setTitle('San Francisco vs Boston.')
    ->setSubtitle('Wins during season 2021.')
    ->addData([6, 9, 3, 4, 10, 8], 'San Francisco')
    ->addData([7, 3, 8, 2, 6, 4], 'Boston')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setStacked();

Horizontal Bar chart stacked:

return $this->chart->horizontalBarChart()
    ->setTitle('San Francisco vs Boston.')
    ->setSubtitle('Wins during season 2021.')
    ->addData([6, 9, 3, 4, 10, 8], 'San Francisco')
    ->addData([7, 3, 8, 2, 6, 4], 'Boston')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June'])
    ->setStacked();

Hover & Active Colors

You can customize the chart colors in mouse hover & mouse active (by clicking it)

return $this->chart->donutChart()
    ->setTitle('Traffic Sources')
    ->addData([10,5,15])
    ->setLabels(['Direct', 'Referral', 'Social'])
    ->setStatesHover(LarapexChart::STATE_NONE)
    ->setStatesActive(LarapexChart::STATE_LIGHTEN, true);

This chart customizes default behaviors: no hover effect, click to lighten (not darken), and multiple simultaneous selections enabled keeping active colors.