[Vishwas R]

@ebrewer,

Removing padding towards secondary x-axis in the given example is not possible as of now. However setting negative margin to all the axes is the nearest solution that you can achieve in the above example.

If you could share JSFiddle with your use-case, we can suggest you possible solution according to the use-case.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@lineseiki,

In case of step-area chart, the step occurs at particular x-value that you pass. You can use column chart with no space between dataPoints – which you can achieve with the help of dataPointWidth property as shown in below code-snippet.

chart.set("dataPointWidth",Math.ceil(chart.axisX[0].bounds.width/chart.data[0].dataPoints.length),true);

$( window ).resize(function() {
	chart.set("dataPointWidth",Math.ceil(chart.axisX[0].bounds.width/chart.data[0].dataPoints.length),true);
});

Please take a look at this JSFiddle for working example.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

Can you kindly share sample data that you are receiving from the service so that we can analyze it & help you in converting it to the format accepted by CanvasJS?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nehamahajan,

You can fix the vertical position of tooltip by setting top & bottom CSS properties. Please find the necessary CSS styles mentioned below.

.canvasjs-chart-tooltip {  
  top: 360px !important;
  bottom: auto !important;
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

The issue might be with the format of the data being passed to the chart. Parsing it in the format accepted by CanvasJS Chart should work fine in your case. Please refer to this documentation page for step-to-step tutorial on fetching data from external source (JSON) & parsing it to the format accepted by CanvasJS before rendering chart.

Please refer to this article for more information on adding CanvasJS charts in Arduino. Also take a look at this Github-repository for complete code.

Considering this as duplicate of Simple chart and XMLHttpRequest query. Hence closing the same.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

The issue might be with the format of the data being passed to the chart. Parsing it in the format accepted by CanvasJS Chart should work fine in your case. Please refer to this documentation page for step-to-step tutorial on fetching data from external source (JSON) & parsing it to the format accepted by CanvasJS before rendering chart.

Please refer to this article for more information on adding CanvasJS charts in Arduino. Also take a look at this Github-repository for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@pawan-it17,

It seems like you are not calling bubbleSort method in the code that you have shared. Calling the method seems to be working fine. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@ravidasari,

Sorry for the inconvenience caused. There seems to be issue with axis-range when there are less number of datapoints (1 datapoint in 2 dataseries in this case). As we were busy working on some other important features, we were unable to fix this. We will prioritize and fix it in future versions. Meantime you can get it worked by setting minimum & maximum manually. Please find the code-snippet below.

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

Richo,

Can you kindly create sample project reproducing the issue and share it with us over Google-Drive or Onedrive along with sample data so that we can run it locally to understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS

[Vishwas R]

@abhihd,

Chart doesn’t automatically group dataPoints by its label. When only label is given (without x-value), internally it assigns x values to dataPoints in an order. So, there can be different dataPoints with same x value but different label. You can pass x-value along with label to group them accordingly. Please find the updated datapoints below.

data: [
    {        
      type: "line",
      dataPoints: [
        { x: 1, y: 30, label: "label1" },
        { x: 3, y: 40, label: "label3" },
        { x: 4, y: 50, label: "label4" },
        { x: 5, y: 60, label: "label5" },
        { x: 7, y: 90, label: "label7" },
        { x: 8, y: 20, label: "label8" },
        { x: 9, y: 50, label: "label9"}

      ]
    }, {        
      type: "line",
      dataPoints: [
        { x: 1, y: 10, label: "label1" },
        { x: 2, y: 20, label: "label2"},
        { x: 3, y: 30, label: "label3" },
        { x: 4, y: 40, label: "label4" },
        { x: 5, y: 50, label: "label5" },
        { x: 6, y: 60, label: "label6" },
        { x: 7, y: 70, label: "label7" },
        { x: 8, y: 80, label: "label8" },
        { x: 9, y: 90, label: "label9"}

      ]
    }
  ]

Please take a look at this JSFiddle for complete code.

[Vishwas R]

@nerviozzo96,

You can use unicode for superscript / subscript in chart elements like title, legend, indexLabel, etc. Please take a look at this JSFiddle for an example on same.

Also refer to this forum topic for relevant query / solutions.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nehamahajan,

You can customize the max-width of tooltip & it’s content by setting following CSS style properties for tooltip & it’s children.

.wordwrap { 
   white-space: pre-wrap;
}
.canvasjs-chart-tooltip * {
  max-width: 200px !important; 
}
.canvasjs-chart-tooltip {
  left: 250px !important;
  width: 200px;
}

Please take at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@nguyentanson1996gmail-com,

You can hide the information related to hidden dataseries by setting toolTipContent of that particular dataseries to null. Please find the code-snippet below.

itemclick : function(e) {
  var content;
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    content = e.chart.data[e.dataSeriesIndex].toolTipContent;
    e.dataSeries.toolTipContent = null;
  }
  else {
    e.dataSeries.visible = true;
    e.dataSeries.toolTipContent = content;
  }
  chart.render();
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS

[Vishwas R]

@efreed,

Thanks for sharing the solution. This will help others :)

—
Vishwas R
Team CanvasJS

[Vishwas R]

@cunghita,

Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand the scenario better and help you out?

—
Vishwas R
Team CanvasJS