You can sort the datapoints before rendering the chart to achieve your requirement. Please refer to this forum thread for more information.
—
Thangaraj Raman
Team CanvasJS
Can you kindly create a sample project reproducing the issue you are facing and share it with us over Google Drive or OneDrive so that we can look into your code, run it locally at our end to understand the scenario better, and help you out?
—
Thangaraj Raman
Team CanvasJS
All the elements of the chart and the size of the image is based on the number of pixels. DPI is a measurement of “Dots per Inch” however, images are measured in pixels. Please refer to this Stackoverflow thread for more information.
If you are looking to export charts at higher resolution, you can increase the size of the chart before exporting. Please take a look at this JSFiddle for an example.
—
Thangaraj Raman
Team CanvasJS
Can you kindly share a pictorial representation or create a JSFiddle reproducing the issue you are facing & share it with us so that we can look into the code/chart options being used, understand the scenario better and help you out?
—
Thangaraj Raman
Team CanvasJS
By default, the height of the container depends on its content. When setting the height of child elements in percentage, the parent element’s height must be set explicitly since the child element’s height is calculated as a percentage of the defined parent element’s height. (In your case, you are setting the height of both parent and child elements in percentage). Setting the height of the body element explicitly to 100vh seems to be working fine.
Please take a look at this Stackblitz for an example.
—
Thangaraj Raman
Team CanvasJS
You can pass the color within single quote to set the font-color of the text shown in tooltip as shown in the code-snippet below:
contentFormatter: function (e) {
var content = " ";
for (var i = 0; i < e.entries.length; i++) {
content += e.entries[i].dataSeries.name + " " + "<strong style='color: red;'>" + e.entries[i].dataPoint.y + "</strong>";
content += "<br/>";
}
return content;
}
—
Thangaraj Raman
Team CanvasJS
You can use stripLines to shade the portion of the chart which displays evening data as shown in the code snippet below:
stripLines: [
{
startValue: new Date(2012,1,1,0,0,0),
endValue: new Date(2012,1,1,7,0,0),
color: "lightblue"
},
{
startValue: new Date(2012,1,1,19,0,0),
endValue: new Date(2012,1,2,7,0,0),
color: "lightblue"
},
{
startValue: new Date(2012,1,2,19,0,0),
endValue: new Date(2012,1,3,7,0,0),
color: "lightblue"
},
]
Please take a look at this updated JSFiddle for a working example.
—
Thangaraj Raman
Team CanvasJS
It is not possible to add a spinner for individual charts within a stockchart as of now, however, you can add it at the stockchart level.
Please check this updated JSFiddle for a working example.
—
Thangaraj Raman
Team CanvasJS
Please check this JSFiddle for an example on adding a spinner icon before chart is rendered.
Also please refer to this forum thread for more information on the same.
—
Thangaraj Raman
Team CanvasJS
Glad that you were able to make it work. If you have any further queries or facing any other issues, kindly create a JSFiddle with your use case and share it with us so that we can look into the code / chart-options being used, understand the scenario better and help you out?.
—
Thangaraj Raman
Team CanvasJS
You can update lineColor and markerColor based on change in the dropdown(or after button click in your case) to achieve your requirement.
Please check this JSFiddle for a working example.
—
Thangaraj Raman
Team CanvasJS
It is possible to create ripple animation for just a single dataPoint by updating the markerBorderColor at the dataPoint level instead of the dataSeries level.
Please check this updated JSFiddle for a working example.
—
Thangaraj Raman
Team CanvasJS
It is not possible to create a ripple effect with the marker as of now, however, you can set markerBorderThickness and markerBorderColor to create a similar effect.
Please check this JSFiddle for a working example.
—
Thangaraj Raman
Team CanvasJS