[Thangaraj Raman]

@pncookson,

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

[Thangaraj Raman]

@joinfurther,

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

[Thangaraj Raman]

@cmayo,

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

[Thangaraj Raman]

@awani,

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

[Thangaraj Raman]

@awani,

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

[Thangaraj Raman]

@oleglr,

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

[Thangaraj Raman]

@hejenemy,

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

[Thangaraj Raman]

@oleglr,

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

[Thangaraj Raman]

@oleglr,

You can update the markerBorderColor every second using setInterval to create a ripple animation for the marker.

Please take a look at this updated JSFiddle for an example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@oleglr,

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

[Thangaraj Raman]

@an01,

You can create custom legends using DOM as shown in this JSFiddle. You can add a checkbox along with text instead of marker in the example shared and further customize it as per your requirement.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@jashan-dhiman,

z value sets the size of the bubble which is used for visualizing the difference in value between the dataPoints. The size of the bubble depends on the difference in the z value of dataPoints and has a max limit(which depends on multiple factors like minimum z value, maximum z value, etc.) on the size after which it won’t increase any further. You can control the size of the bubble by increasing or decreasing the z value as per your requirement.

—
Thangaraj Raman
Team CanvasJS.

[Thangaraj Raman]

@elanchezhiyan,

Whisker length depends on multiple factors like dataPointWidth, dataPointMaxWidth, axis range, etc. In your case, the whisker length gets limited because you are setting x-axis range(I noticed you are setting axisX minimum and maximum). Removing these properties should work fine.

However, if you would like to override this behavior, you can set whiskerLength as well as increase the default dataPointWidth.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@friday096,

You can render a chart similar to the one you have shared by creating a dynamic chart and setting labelAutoFit to false as well as updating the y-axis maximum.

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Thangaraj Raman]

@blazg,

Glad that you were able to make it work.

—
Thangaraj Raman
Team CanvasJS