Carl Bright,
You can move toolbar to top-right / top-left by changing CSS positioning properties. Please find the code-snippet below.
.canvasjs-stock-container .canvasjs-chart-toolbar {
top: 0px !important;
left: 10px !important;
right: auto !important;
transform: rotate(270deg) translate(-50%, -50%) !important;
}
Please take a look at this JSFiddle for working code.
—
Vishwas R
Team CanvasJS
Setting axisY viewportMinimum & viewportMaximum same as axisX in rangeChanged event-handler should work in your case. Please find the code-snippet below.
rangeChanged: function(e){
e.chart.axisY[0].set("viewportMinimum", e.axisX[0].viewportMinimum, false);
e.chart.axisY[0].set("viewportMaximum", e.axisX[0].viewportMaximum);
}
Please take a look at this JSFiddle for a working example.
—
Vishwas R
Team CanvasJS
Some of the text content might look blurry because of the font-families & it’s size. I suggest you to try using Web Safe Fonts & font size that looks better as per the size of the image.
—
Vishwas R
Team CanvasJS
You can hide grids, ticks & axis lines by setting gridThickness, tickLength and lineThickness properties to 0. Please find the code-snippet below.
axisX:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0
},
axisY:{
gridThickness: 0,
tickLength: 0,
lineThickness: 0
},
If you like to show axis labels inside the bar, you can do so by using labelPlacement property. Please take a look at this gallery page for an example on the same. However, if your requirement is to completely hide the axis labels & use indexlabels, you can use labelFormatter to do so. Below is the code snippet for the same.
axisX: {
labelFormatter: function(e) {
return "";
}
}
Please take a look at this JSFiddle for an example on sparkline chart. Also, take a look at this Github repo for a plugin that ease your task.
—
Vishwas R
Team CanvasJS
[UPDATE]
@mm,
We have just released CanvasJS Charts v3.7.2 with this fix. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.
—
Vishwas R
Team CanvasJS
As you are passing x-values as time-stamp, it’s not considered as date-time but number. Setting interval to 1 will make chart render axis label at an interval of 1, i.e. for every 1 milliseconds and not at every 1 day. Setting xValueType: "dateTime"
will convert axis into date-time axis & should work fine in this case. Also, I would suggest you to use valueFormatString to define the format of the axis label instead of using labelFormatter, unless your requirement is to completely format the axis label. Please take a look at this updated JSFiddle for the working code.
—
Vishwas R
Team CanvasJS
X-Value can either be numeric or JavaScript date-time. In your case, it seems to be Java date-object. Passing it as timestamp as shown in this Gallery Example should work fine in this scenario.
If you are still facing issue, kindly create a sample project reproducing the issue & share it with us over Google-Drive or Onedrive so that we can run the sample locally to understand the scenario better and help you out.
From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact scenario, or the solution that we provide may not work properly due to the variation in chart options being used by you and us.
Having a sample project helps us in figuring out the issue and suggesting an appropriate solution accordingly.
—
Vishwas R
Team CanvasJS
Can you kindly upload the sample project reproducing the issue you are facing to Google-Drive or Onedrive & share the link with us so that we can run it locally to understand the scenario better and help you out?
From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact scenario, or the solution that we provide may not work properly due to the variation in chart options being used by you and us.
Having a sample project helps us in figuring out the issue and suggesting an appropriate solution accordingly.
—
Vishwas R
Team CanvasJS
Craig Pickerill,
It looks like the sample / image provided by you is restricted and requires permission. Can you kindly make it public so that we can access it & understand the scenario to help you out?
—
Vishwas R
Team CanvasJS
With the help of get method, you can get to know the maximum of primary y-axis. Once you get the maximum of primary y-axis, you can use set method to set the maximum of secondary y-axis. Below is the code-snippet to do so.
chart.axisY2[0].set("maximum", chart.axisY[0].get("maximum"));
—
Vishwas R
Team CanvasJS
@mm,
Sorry for the inconvenience caused. We will fix it in our upcoming versions and we will keep you posted once the bug is fixed.
—
Vishwas R
Team CanvasJS
@rck,
Unfortunately, it’s not possible to have custom marker-size on hover as of now.
—
Vishwas R
Team CanvasJS
@rck,
By default marker borders are disabled & are not shown around the marker. Setting markerBorderThickness to a value greater than 0 will add border to the marker & makes it look bigger. Please take a look at this JSFiddle for an example on hiding markers by default but showing a bigger marker on mouse hover.
—
Vishwas R
Team CanvasJS
Gridlines are drawn at every interval of the axis. Color & thickness of all the grids can be changed using gridColor & gridThickness properties respectively. As addressed earlier, you can use stripline at a particular value to show different thickness & color of a grid. Please take a look at this JSFiddle for an example.
—
Vishwas R
Team CanvasJS