1) I have a Bar Chart with two Lines (target values and limits). My Problem here is, I can’t get the lines to start at the very beginning of the x-axis and end at the very end of the x-axis.
You can use stripLines on axisY to achieve the above requirement. Please take a look at the documentation page for more information and live example.
2) I need to be able to add HTML-Code to Headlines, will this be possible in the near future?
HTML is not supported in title as of now. However, you can use unicode to show subscript as shown in this JSFiddle.
—-
Manoj Mohan
Team CanvasJS
It seems like you have missed out updating stripLine values. Adding the following lines should work fine in your case.
chart.axisX[0].stripLines[0].set("value", chart.axisX[0].get("viewportMaximum"));
chart.axisY[0].stripLines[0].set("value", chart.axisY[0].get("viewportMaximum"));
—-
Manoj Mohan
Team CanvasJS
You can change the color of column using color property of dataPoint as shown in the code snippet below –
function setColor(chart){
for(var i = 0; i < chart.options.data.length; i++) {
dataSeries = chart.options.data[i];
for(var j = 0; j < dataSeries.dataPoints.length; j++){
if(dataSeries.dataPoints[j].y <= 0)
dataSeries.dataPoints[j].color = 'rgb(170, 0, 0)';
}
}
}
Also, please take a look at this JSFiddle which shows setting different colors to positive and negative values.
—-
Manoj Mohan
Team CanvasJS
It’s not possible to position indexLabel with an angle. As of now, it can either be positioned vertical or horizontal. However, we will reconsider this behavior in future versions.
—-
Manoj Mohan
Team CanvasJS
Sudha,
The issue seems to be with the context of “this” used in the onClick function. Please take a look at this updated sample.
—-
Manoj Mohan
Team CanvasJS
Sudha,
The issue seems to be with the binding of click-event handler. onClick that’s being assigned to click event in sample.data.ts file is undefined. Please take a look at this updated sample.
—-
Manoj Mohan
Team CanvasJS
Yes, it will work with frameworks like Angular, React, Vue, etc.
—-
Manoj Mohan
Team CanvasJS
You can trigger the popup/modal to show-up on clicking a datapoint. Please take a look at this JSFiddle for an example on showing Bootstrap modal on clicking on a datapoint.
—-
Manoj Mohan
Team CanvasJS
You can achieve your requirements by attaching click event handler to the dataPoint. Please refer this documentation page for more information along with a live example that you can try out.
If this doesn’t fulfill your requirements, kindly share an example and brief us more about your requirement so that we can understand your scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS
Tejal,
The value 0 (zero) towards left of the axisY is the label of axisY whereras the value 0 (zero) below the axisX is the label of axisX. As both the values x & y of dataPoint are 0 (zero), the dataSeries line is being drawn from (0,0) co-ordinate. If you like the axisX scale to be started from 0, you can set minimum of axisX to 0.
—-
Manoj Mohan
Team CanvasJS
Please take a look at this sample project to integrate CanvasJS with Angular.
In case you are still facing the issue, kindly share sample project reproducing the issue over google-drive or Onedrive so that we can run sample locally at our end, understand the scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS
CanvasJS Chart supports all versions of angular and chart seems to be working fine in Angular 8. Please take a look at this Sample project for a working example on creating column chart in Angular 8.
If you are still facing the issue, kindly share sample project reproducing the issue over Google-Drive or Onedrive so that we can run sample locally at our end, understand the scenario better and help you out.
—-
Manoj Mohan
Team CanvasJS
You can either use JavaScript Date objects or timestamp to set the startValue and endValue for stripLine if xValueType is set to dateTime. Please take a look at this updated JSFiddle.
—-
Manoj Mohan
Team CanvasJS