Padding is not available in legend, as of now. Are you looking for space between legend-marker and legend-text? If so you can achieve it by setting markerMargin property. If not can you kindly share some pictorial representation or an example of your requirements so that we can understand it better and help you out?
—
Vishwas R
Team CanvasJS
Labels are shown at every interval of the axis. To avoid overlapping, chart skips alternative labels which can be overridden by setting interval property. Incase of date-time axis, you may need to set intervalType along with interval according to your data, please refer documentation for more info and live examples.
If this doesn’t solve the issue you are facing, kindly create JSFiddle reproducing the issue and share it with us so that we can look into the code, understand the scenario better and help you out.
—
Vishwas R
Team CanvasJS
Can you kindly create a JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, 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 requirements 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 JSFiddle helps us in figuring out the issue and many a times we can just edit your code on JSFiddle to fix the issue right-away.
—
Vishwas R
Team CanvasJS
Please take a look at this JSFiddle for an example on rendering chart with data from a HTML form. Also please refer this documentation page for step-by-step tutorial on rendering chart with data from user input.
—
Vishwas R
Team CanvasJS
When the chart is zoomed, you can find whether a dataPoint is within the viewport range or outside with the help of rangeChanged event.
rangeChanged: function(e) {
var dpsWithinViewport = 0;
for(var j = 0; j < e.chart.data[0].dataPoints.length; j++) {
var dataPoint = e.chart.data[0].dataPoints[j];
if(dataPoint.x >= e.axisX[0].viewportMinimum && dataPoint.x <= e.axisX[0].viewportMaximum) {
dpsWithinViewport++;
}
}
if(e.trigger === "reset")
updateDataPointWidth(e.chart, e.chart.data[0].dataPoints.length);
else
updateDataPointWidth(e.chart, dpsWithinViewport);
}
Please take a look at this JSFiddle for nearest possible solution to set the dataPointWidth by finding the number of dataPoints within the viewport range.
—
Vishwas R
Team CanvasJS
Adam Griffiths,
Labels are shown at every interval of the axis. To avoid overlapping, chart skips alternative labels which can be overridden by setting interval property. Incase of date-time axis, you may need to set intervalType along with interval according to your data, please refer documentation for more info and live examples.
—
Vishwas R
Team CanvasJS
You can perform button click programmatically to switch to pan mode by default & hide the zoom/pan button using CSS to do so. Below is the code-snippet for the same.
-----CSS----
.canvasjs-chart-toolbar> button:first-child {
display: none !important;
}
----JS----
var parentElement = document.getElementsByClassName("canvasjs-chart-toolbar");
var childElement = document.getElementsByTagName("button");
if(childElement[0].getAttribute("state") === "pan"){
childElement[0].click();
}
Please take a look at this JSFiddle for complete code.
—
Vishwas R
Team CanvasJS
Changing text: $title
to text:<?php $title ?>
should work fine in your case.
If the issue still persists, kindly share sample project along with sample data over Google-Drive or Onedrive so that we can run it locally at our end to understand the scenario better and help you resolve.
—
Vishwas R
Team CanvasJS
You can combine error chart with column / bar chart to achieve your requirements. Please take a look at this JSFiddle.
—
Vishwas R
Team CanvasJS
Setting zoomEnabled property to true will show zoom / pan & reset buttons, once the chart is zoomed.
zoomEnabled: true,
Please take a look at this updated JSFiddle.
—
Vishwas R
Team CanvasJS
Are you looking for programatically zooming / panning the chart? If so you can achieve it by changing viewportMinimum and viewportMaximum. Please take a look at this JSFiddle for the same.
—
Vishwas R
Team CanvasJS
You can customize the position of zoom / pan button by changing the CSS of ‘canvasjs-chart-toolbar’ class. Please take a look at this JSFiddle for an example where zoom / pan buttons are positioned to the top-left of the chart.
—
Vishwas R
Team CanvasJS