Multi-line Chart with Axis on Independent scales

[sharat-rhinofish]

Hello,

I am building a multi-line chart having Revenue and Order values. The X-axis and Y-axis labels are showing up. However, since Order numbers are much lesser than Revenue numbers, the line chart for Orders is almost touching the x-axis.

Revenue numbers are like $1000, $1500 kind of magnitude Order numbers are like 50 to 100 per month.

I want the Order numbers line chart on an independent scale. This is possible in Apex Charts with something like: { opposite: true, title: { text: "Series B" } }

The question is how to do I do this using asantibanez/livewire-charts?

Also, the ticks do not show up on the x-axis or the y-axis. How do I get those to show up?

Also, are advanced features of Apex Charts like gradient fill like shown below available via asantibanez/livewire-charts? fill: { type: 'gradient', gradient: { shadeIntensity: 1, inverseColors: false, opacityFrom: 0.5, opacityTo: 0, stops: [0, 90, 100] }, }

Thanks and Regards, Sharat

[asantibanez]

Good morning @sharat-rhinofish. Hope you are doing well.

Are you using the latest version with Livewire V3?

This one includes the ability to add custom JSON properties supported by Apex Charts.

Take a look at this part of the docs. https://github.com/asantibanez/livewire-charts#advanced-usage---custom-json-configs

[sharat-rhinofish]

I am using 2.x. I upgraded now to version 3

Using Json properties, how would I add the series B title and mark opposite is true for Series B, for a multi-line chart – refer https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/

Would it be something like given below?

$chart->setJsonConfig([

     "plotOptions.yxis"" => [

           ["title" => ["text" => "Series A"]],

           ["opposite"" => true, ""title" => ["text" => "Series B"]],

],

]);

Heartful Regards,

Sharat

From: Andrés Santibáñez @.> Reply to: asantibanez/livewire-charts @.> Date: Thursday, 24 August 2023 at 8:35 PM To: asantibanez/livewire-charts @.> Cc: Sharat Hegde @.>, Mention @.***> Subject: Re: [asantibanez/livewire-charts] Multi-line Chart with Axis on Independent scales (Issue #102)

Good morning @sharat-rhinofish. Hope you are doing well.

Are you using the latest version with Livewire V3?

This one includes the ability to add custom JSON properties supported by Apex Charts.

Take a look at this part of the docs. https://github.com/asantibanez/livewire-charts#advanced-usage---custom-json-configs

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[sharat-rhinofish]

After the upgrade to Livewire 3.0, I am now getting a "ComponentNotFoundException" exception with the order-volume component

The following is present in the container blade file.

OrderVolume.php component file exists in the App/Http/Livewire folder

This was working fine on 2.x

[sharat-rhinofish]

I had to upgrade Livewire to 3.0 using the Livewire upgrade command and then the Component Not found error went away. However, I am still facing some problems in getting the components working as Livewire 3.0 has changed events. The chart is not rendering as of now.

[sharat-rhinofish]

@asantibanez , I upgraded to Livewire 3.0 and the charts are now showing fine with the basic options. I had to remove the following line in my scripts section: @livewireScriptConfig

However, the setJsonConfig is still not working. I tried with a simple pie chart to test this out. Here is the code from the Component file.

$pieChartModel = LivewireCharts::pieChartModel(); $pieChartModel->addSlice("Food", 20, '#ff0000'); $pieChartModel->addSlice("Clothing", 30, '#00ff00'); $pieChartModel->addSlice("Shelter", 40, '#0000ff'); // Code works fine till here. $pieChartModel->setJsonConfig([ // This line does not give any errors, but does not 'plotOptions.pie.startAngle' => -90, 'plotOptions.pie.endAngle' => 90, 'plotOptions.pie.offsetY' => 10, 'grid.padding.bottom' => -180, ]); Attaching the generated image for the pie chart.

Any help will be appreciated.

[sharat-rhinofish]

@asantibanez , I have finally fixed the issue.

I found the following issues: The app.js in the package is not a compiled version of the JS files, and did not include the merging of the jsonConfig which had been done in the pieChart.js file by you. Hence, I had to publish the JS files in my project resources folder using https://github.com/asantibanez/livewire-charts#advanced-usage---integrating-scripts and add a webpack.min.js entry to build the files.

I also found that the jsonConfig and the merging of the options with the jsonConfig was not done for the Line Charts. I then had to add those lines into the line charts JS files.

In the process, I removed the other charts from app.js to reduce the app.js file size a bit.

Finally, I have the extra JSON configs removed. The code I have for the extra JSON config is

        $lineChartModel->setJsonConfig([
            'yaxis' => [
                [
                    "title" => [
                        "text" => "Revenue",
                    ],
                ],
                [
                    "opposite" => true,
                    "title" => [
                        "text" => "Orders",
                    ]
                ]
            ]
        ]);

With Regards, Sharat

[zawilliams]

@sharat-rhinofish this seems to be a bug, no? If you're having to export stuff and change it in your own app.js (specifically the jsonConfig), then it seems to me this shouldn't be closed?

I actually am having the same issue with the columnChartModel() and calling setJsonConfig(). It doesn't seem to merge the options when set. Or at least I don't see anything reflected on the chart when I do set options using setJsonConfig().

[zawilliams]

@asantibanez also tagging you here. I am also using Livewire V3 here.

[sharathegde]

@zawilliams @asantibanez , Yes, it looks like it was not fully implemented for all charts. The pieChart works fine, but other charts have a problem. You can follow the following steps:

1. Publish the livewire charts scripts. Refer https://github.com/asantibanez/livewire-charts#advanced-usage---integrating-scripts
2. Add the following line to the top of the columnChart.js file

   import { mergedOptionsWithJsonConfig } from "./helpers";

3. Add the following line in the drawChart(component) function after the line "const sparkline = component.get("columnChartModel.sparkline");"

   const jsonConfig = component.get("columnChartModel.jsonConfig");

4. Towards the end of the function before the render is called, change the line which instantiates the apexCharts to the following:

   this.chart = new ApexCharts(
   this.$refs.container,
   mergedOptionsWithJsonConfig(options, jsonConfig)
   );

Now if you build your files with npm run dev or npm run production, the app.js should come out fine.

You may need to install apex charts to build the app.js afresh using "npm install apexcharts --save". Refer: https://apexcharts.com/docs/installation/

With Regards, Sharat