[Vishwas R]

Mark,

Thanks for your continued interest in CanvasJS. One of our representative from sales-team will get in touch with you soon over email. For any other sales related queries feel free to inbox us at sales@canvasjs.com

—
Vishwas R
Team CanvasJS

[Vishwas R]

@diano4ka,

To ensure axis grids are displayed, you need to pass an empty dataseries & specify the chart type (like “line” or “column”, defaults to “column”) along with grid-options. You need to explicitly pass empty dataseries as axis is not present in chart-types like pie, doughnut, funnel & pyramid. Hence, the axis elements passed in options are not considered when chart-type is unknown – when data is an empty array. Changing data:[] to data:[{}] should work fine in your case. Please take a look at this JSFiddle for an example of the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sujeet,

You are getting this warning because angular-charts package uses CommonJS/AMD modules. You can suppress the warning by adding it to allowedCommonJsDependencies under build options in your angular.json file, as shown below:

"build": {
    "options": {
        "allowedCommonJsDependencies": [
            "@canvasjs/angular-charts"
        ],
        ...
    },
    ...
}

Please refer to this angular documentation for more information.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@scompliance,

Looks like brave is blocking getImageData() function which is used for hit detection. Hide / Unhide Dataseries on Legend click should work fine when you disable “Block Fingerprinting” in Brave Shields. Please refer the below links for more information.

https://community.brave.com/t/getimagedata-does-not-work-in-brave/43292
https://community.brave.com/t/in-iframe-canvas-api-getimagedata-returns-empty-in-brave-browser/119128
https://community.brave.com/t/htmlcanvaselement-todataurl-always-returns-empty-string/105010

—
Vishwas R
Team CanvasJS

[Vishwas R]

@fatemk,

Re-rendering the chart on resizing the grid should work fine in this case. You can re-render the chart either on resize or resizestop events. Please find the code-snippet below.

grid.on("resizestop", function(resizestop) {
    chart.render();
});

Please take a look at this updated pen for complete code.

Also, you seem to be using third-party CanvasJS React Charts package. We recommend you to use Official CanvasJS React Charts package.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Max Fey,

Adding commonjsOptions: { transformMixedEsModules: true } to the build option of Vite config should fix this issue. Please refer to this Stack Overflow thread for more information about the same. Please take a look at this link for a working sample that’s deployed in vercel and checkout this Github repository for the project.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Max Fey,

We tried deploying a React app with CanvasJS Chart in vercel, it seems to be working fine. Please take a look at this link for a working sample that’s deployed in vercel and checkout this Github repository for the project.

If you are still facing issue, kindly share your project with us over Google-Drive or Onedrive (or in Github) so that we can try deploying it from our side to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@sameer89,

You can import CanvasJS from angular-charts package to add custom colorset as shown in the code-snippet below.

import { CanvasJS } from '@canvasjs/angular-charts';
CanvasJS.addColorSet('customColorSet', ['#4661EE', '#EC5657', '#1BCDD1', '#8FAABB', '#B08BEB', '#3EA0DD', '#F5A52A', '#23BFAA', '#FAA586', '#EB8CC6']);

Please take a look at this Stackblitz for an example of the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@kpandey017,

Labels are displayed at regular intervals on the axis. Additionally, to enhance readability and prevent overlapping, the chart omits alternate labels, in some cases. However, if you prefer to display all labels, you can achieve this by setting the interval to 1.

axisX: {
  interval: 1
}

Please take a look at this updated JSFiddle for the working code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@codetonight,

You can update the chart title dynamically to reflect the name of the selected datapoint upon clicking. Please find the code-snippet below:

click: function(e) {
  e.chart.title.set("text", e.dataPoint.name);
}

Please take a look a this JSFiddle for an example of the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@crapo,

Bounds of axis depends on multiple factors including the axis labels. In your case, ticks of axisY & axisY2 are not getting aligned as labels are shown for axisY, which takes up space towards the top of the axis & axisY2 doesn’t. You can overcome this either by reducing labelFontSize in axisY or by setting labelFontColor of axisY2 to be same as chart-background along with a negative margin. Please take a look at this updated JSFiddle for an example where ticks are aligning.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@itissandeep,

We tried deploying the production build in a server and in vercel, it seems to work fine when you mention chart component to be used in client-side ("use-client"). Please take a look at this link for a working sample that’s deployed in vercel and checkout this Github repository for the project.

If you are still facing issue, kindly share your project with us over Google-Drive or Onedrive (or in Github) so that we can try deploying it from our side to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@itissandeep,

CanvasJS is a client-side library and has to be prevented from rendering at server-side. When you try to generate build for production, it causes issue with libraries that depend on the browser’s window object. You can import CanvasJS package dynamically by passing ssr: false that disables importing of components that are not needed for SSR. Please take a look at this sample project for a working example on adding CanvasJS React Charts in Next.js app.

Also, please refer to this article for more information on adding CanvasJS chart in Next.js apps.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@themadmattt,

The solution to show the label 40 depends on multiple factors based on chart-options you are using. Setting axisX viewportMinimum to a 38/39 or setting labelAngle to a positive value should work. However, these are not the limited set of solutions as we don’t know the exact use-case of yours. Kindly try out the solutions & see if it works. If you are still facing issue, kindly create a JSFiddle reproducing the issue (with sample data) & share it with us so that we can look into the chart-options being used, understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@heavell,

It’s not possible to align multi-series box and whisker chart side-by-side as of now, similar to column chart. However, you can increase / decrease x-values of datapoints to achieve the same. Please take a look at this updated JSFiddle for an example on the same.

—
Vishwas R
Team CanvasJS