[Vishwas R]

@praveen-garg,

Applying custom CSS to indexLabel is not available as of now, but you can customize toolTip either by using contentFormatter or by over-riding toolTip class as shown in this jsfiddle.

In bar/column charts, indexLabels are placed inside or outside based on the available space. You can set indexLabelPlacement in dataSeries level to outside so that indexLabels are shown outside the bar.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@dimas19801,

Please refer Tutorial on Creating Charts from JSON Data & AJAX.

The JSON data needs to parsed before passing it to chart-options. Check out the below code snippet for the same.

$.getJSON("https://api.npoint.io/6be170cb804361d314e3", function(chartData) {  
	for(var i = 0; i < chartData.length; i++){
  	dps.push({ x: new Date(chartData[i].x), y: chartData[i].y});
  }
	chart = new CanvasJS.Chart("wtChart", {    
  	title: {
    	text: "Chart from External JSON Data"
    },
    data: [
      {
        type: "column",
        dataPoints: dps
      }
    ]
  });
  chart.render();
});

Please check this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@vidsocio,

Sorry for the inconvenience. We are looking into the issue. Meanwhile you can over-ride CSS as shown in this jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Tom,

A logarithmic axis can only plot positive values. There is no way to put negative values or zero on a logarithmic axis.

Fundamental: If 10L = Z, then L is the logarithm (base 10) of Z. If L is zero, then Z equals 1.0. If L is a less than 0, then Z is a positive fraction less than 1.0. If L is greater than 0, then Z is greater than 1.0. Note that there no value of L that results in a value of Z that is zero or negative. Logarithms are simply not defined for zero or negative numbers.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@davidr,

JavaScript does not have access to the computer’s file system, please refer this stackoverflow thread for more information on the same. Either you can render chart as-such without interactivity or store base64 image globally and replace chart with image with stored base64 image data as source to show static image in a webpage.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@davidr.

You can get base64 image data of a canvas by using toDataURL. As CanvasJS charts are rendered on canvas, you can use toDataURL on chart to get base64 image data of the chart. Passing base64 data as source of image should work fine in your case. Please find the code-snippet below

var base64Image = chart.canvas.toDataURL();
document.getElementById('chartContainer').style.display = 'none';
document.getElementById('chartImage').src = base64Image;

Please check this JSFiddle for an example on the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@rcardenas,

Please take a look at this jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Austin,

Glad it’s working. Thanks for letting us know.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@rietveld,

Datapoint y-value should be number, but in your case its string. Converting string values to number before assigning them to “y” should work fine in your case. dps.push({label: item.Name, y: Number(item.Total) });

—
Vishwas R
Team CanvasJS

[Vishwas R]

@austin,

We have fixed the issue and here is an internal build for the same. Kindly download the fixed version and let us know your feedback.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@oneworld,

Integral multiple of interval means if interval is 10, ticks will be shown at every values that are multiples of 10 like -30,-20,-10,0,10,20,30 etc irrespective of the minimum and maximum set. If minimum/maximum set is integral multiple of the interval, tick will be shown at minimum/maximum as-well, else it won’t be shown.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@oneworld,

To show tick/value at minimum and maximum, minimum and maximum should be integral multiples of interval. i.e. tick/value will appear only at y-values that are integral multiples of the interval.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@jerrygarciuh,

Because of multiple X / Y axis support, all axis parameters in events like rangeChanging / rangeChanged have been changed to array from object (Since v1.8.5), refer this release-post for more info. Changing e.axisX to e.axisX[0] should work fine in your case. Please check this updated jsfiddle.

We had missed out updating this jsfiddle. Thanks for bringing it to our notice, we have updated the jsfiddle accordingly.

—
Vishwas.R

[Vishwas R]

Targaryen,

As documented in MDN,
Given a date string of “March 7, 2014”, parse() assumes a local time zone, but given an ISO format such as “2014-03-07” it will assume a time zone of UTC (ES5 and ECMAScript 2015). Therefore Date objects produced using those strings may represent different moments in time depending on the version of ECMAScript supported unless the system is set with a local time zone of UTC. This means that two date strings that appear equivalent may result in two different values depending on the format of the string that is being converted.

Please check this stackoverflow thread for more info. You can solve it either as mentioned in stackoverflow or by changing the date-format as shown in this jsfiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Emeric,

You can programmatically zoom into certain region by setting viewportMinimum and viewportMaximum. If you like to set zoom into certain region after clicking the button, you can do so by changing viewportMinimum & viewportMaximum on clicking the button. Below is the code-snippet for the same.

document.getElementById("zoomBtn").addEventListener("click", function(){
  chart.axisX[0].set("viewportMinimum", new Date(2002, 01, 01), false);
  chart.axisX[0].set("viewportMaximum", new Date(2006, 01, 01));
});

Please take a look at this JSFiddle for complete code.

Also take a look at this jsfiddle, where viewportMinimum and viewportMaximum are changed based on dropdown options.

—
Vishwas R
Team CanvasJS