AndyDTK's avatar

Styling ChartJS

Hello,

I am trying to change "dinamically" the font color on the side scale of a series in a ChartJS with Laravel Chart but I don't understand how to pass...

I want to do this:

scales: { y: { ticks: { color: '#00ff00', beginAtZero: true } }, x: { ticks: { color: '#ff0000', beginAtZero: true } } }

but inside the dataset creator in my controller:

        $toolChart->dataset('H (mm)', 'bar', $strumentiH)->color("rgb(0, 51, 153)")->options(['yAxisID' => 'y-axis-1']);
        $toolChart->dataset('V (m/s)', 'line', $strumentiV)->color("rgb(250, 51, 0)")->options(['yAxisID' => 'y-axis-2']);

as I passed the yAxisID to the 2 series.

How can I do that?

Thanks...

0 likes
3 replies
Tray2's avatar

If you know the structure of the generated html, then you can override anything.

div > .chart > span {
	color: green; 
}

Add an !important if need be.

AndyDTK's avatar

Sorry, but I have to do all inside controller...

I'll try as is but don't work...

        $toolChart->title("Area Velocity");
        $toolChart->dataset('H (mm)', 'bar', $strumentiH)->color("rgb(0, 51, 153)")->options(['yAxisID' => 'y-axis-1']);
        $toolChart->dataset('V (m/s)', 'line', $strumentiV)->color("rgb(250, 51, 0)")->options(['yAxisID' => 'y-axis-2']);
        $toolChart->options([
            'scales' => [
                'y-axis-1' => [
                        'type' => 'linear',
                        'display' => true,
                        'position' => 'left',
                            'ticks' => [
                                'color' => 'rgb(255,0,0)' // Colore delle etichette dell'asse Y sinistro
                            ]
                    ]
                ]
            ]);
AndyDTK's avatar

SOLVED: have to use

ticks' => [ 'fontColor' => 'rgb(255,0,0)' // Colore delle etichette dell'asse Y sinistro ]

and resolved... thanks!

Please or to participate in this conversation.