[Manoj Mohan]

@syngress,

It seems like you are passing the date-time string to dataPoints. To display the chart containing date-time value in PHP, you need to first convert date-time string to PHP timestamp using strtotime(). Later convert PHP timestamp value to javascript timestamp and assign that value to dataPoint x-value in the following format –

[x]=> (strtotime(“2021-06-11 15:51:38”)*1000)

Please take a look at this sample project for an example on rendering the chart in PHP using date-time values data from database.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

manoj kumar,

You can get the color of legend by using selectedColorset property of chart and index of dataPoint as shown in the code snippet below

indexLabelFormatter: function (e) {
  var dpIndex = getDataPointIndex(e.dataSeries, e.dataPoint);
  var selectedColorSet = chart.get("selectedColorSet");
  var legendColor = e.dataPoint.legendMarkerColor ? e.dataPoint.legendMarkerColor : (e.dataPoint.color ? e.dataPoint.color : selectedColorSet[dpIndex % (selectedColorSet.length-1)]);
  console.log(legendColor);
}
.
.
.
function getDataPointIndex(dataSeries, dataPoint) {
  return dataSeries.dataPoints.findIndex(dp => dp === dataPoint);
}

Also, please take at this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

Dave,

There is no limitation on number of charts within a page / app. You can also check out this documentation page for step-by-step tutorial on rendering multiple charts in a single page.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@canvasjsuser001,

We have released CanvasJS Chart v3.2.18 GA with this bug fix, please check out release blog for more information. Please download the latest version from our download page and let us know your feedback.

—
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nerviozzo96,

Thanks, I guess the same applies for the x axis right?

Yes, you can align x-axis across multiple chart using same logic as mentioned above.

Hi there, this dont work on chart updates. I let you the example
Try to hide and show Series multiple times

You can reset the margin of y-axis to 0 before aligning the y-axis across multiple charts as shown in the code snippet below.

for(var i = 0; i < charts.length; i++) {
   charts[i].axisY[0].set("margin", 0);
}

Also, please take a look at this updated JSFiddle for complete code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@chemoinformaticsm,

It is not possible to reduce the gap between doughnut and legend using chart properties as of now. However, you can reduce the width of chart to reduce the gap between doughnut and legend.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@josefinanoya,

Glad that you figured it out. Adding "noImplicitAny": false, inside the compilerOptions in TypeScript Config file(tsconfig.json) seems to be working fine.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@josefinanoya,

Glad that you figured it out. Adding "noImplicitAny": false, inside the compilerOptions in TypeScript Config file(tsconfig.json) seems to be working fine.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nerviozzo96,

You can align y-axis across multiple charts by setting the margin property. The margin value has to be calculated based on the bounds of y-axis as shown in the code below –

var axisYBoundMax = 0;
for (var i=0; i<charts.length; i++) {
  axisYBoundMax = Math.max(axisYBoundMax, charts[i].axisY[0].bounds.x2);
}

for(var i = 0; i < charts.length; i++) {
  charts[i].axisY[0].set("margin", axisYBoundMax - (charts[i].axisY[0].bounds.x2 - charts[i].axisY[0].bounds.x1));
} 

Please take a look at this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@nerviozzo96,

You can align y-axis across multiple charts by setting the margin property. The margin value has to be calculated based on the bounds of y-axis as shown in the code below –

var axisYBoundMax = 0;
for (var i=0; i<charts.length; i++) {
  axisYBoundMax = Math.max(axisYBoundMax, charts[i].axisY[0].bounds.x2);
}

for(var i = 0; i < charts.length; i++) {
  charts[i].axisY[0].set("margin", axisYBoundMax - (charts[i].axisY[0].bounds.x2 - charts[i].axisY[0].bounds.x1));
} 

Please take a look at this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@boogeyman,

You can use list-style-type property of css to customize the bullets as per your requirement. Please take a look at this MDN documentation for more details.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@ijustloveit13,

You can pass label in dataPoints to display text in x-axis labels like ‘test1’, ‘test2’, etc. in the above case. Please check out this code snippet for the same.

.
.
dataPoints: [
   { label: "test1", y: 2.00, z:306.77 },
   { label: "test2", y: 2.15, z: 237.414 },
   { label: "test3", y: 1.86, z: 193.24 },
   { label: "test4", y: 2.36, z: 112.24 },
   { label: "test5", y: 5.56, z: 154.48 },
   { label: "test6", y: 1.54, z:141.91 }
]}
.
.

Also, kindly take a look at this JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@boogeyman,

The logic mentioned in the above shared example seems to be working fine even in Angular. In angular, you can create an array of legend items and loop it using ngFor in the app.component.html file to display legend items as shown in the code snippet below.

app.component.html

<div class="container">
  <div id="legends" class="col col-2">
    <ul id="legendList">   
      <li *ngFor="let legend of legendList" [style.color]=legend.color>{{legend.text}}</li>   
    </ul>
  </div>
  <div id="chartContainer" class="col col-10" style="height: 360px;"></div>
</div>

app.component.ts

.
.
customLegends(chart: any) {
    var colorSetArray = chart.get('selectedColorSet');
    for (var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
      var dp = chart.options.data[0].dataPoints[i];
      this.legendList.push({
        text: dp.name,
        color: colorSetArray[i % colorSetArray.length]
      });
    }
}
.
.

Also, check out this Stackblitz example for complete working code.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@boogeyman,

You can add spacing between legend marker and legend text using markerMargin, but adding spacing between legends is not possible as of now. However, you can create custom legends using DOM element and use css property to add padding between legends as shown in this updated JSFiddle.

—-
Manoj Mohan
Team CanvasJS

[Manoj Mohan]

@joshuasosa,

Sorry, controlling the first label to display on the axes is not available as of now. However to display axis label for 0.0001, you can set the minimum value of y-axis to 0.00009 in this case.

axisY: {
      logarithmic: true,
      minimum: 0.00009,
      maximum: 10000,
      includeZero: true,
      interval: 1
}

Also, check out this updated JSFiddle for complete working code.

—-
Manoj Mohan
Team CanvasJS