How to add values(space) from the right side
like here
enter image description here
my code here
https://jsfiddle.net/ruit/esv6t6f2/
You can add an attribute 'spacingRight' like this in your chart array:
// Create the chart
chart = $('#container').highcharts('StockChart', {
chart: {
spacingRight: 100,
Related
I want to draw a chart like the following image. How can I do that using Highcharts library?
I am able to get concentric circle in highcharts but not like this. Please help.
Or suggest me a library if the job can be done with that. Thank you in advance.
You can use venn series type and manually position circle elements in the load event, for example:
chart: {
events: {
load: function() {
var points = this.series[0].points,
point1R = points[0].shapeArgs.r;
points[1].graphic.attr({
x: points[1].graphic.getBBox().x - (point1R - points[1].shapeArgs.r)
});
points[2].graphic.attr({
x: points[2].graphic.getBBox().x - (point1R - points[2].shapeArgs.r)
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/padhgfe9/1/
API Reference: https://api.highcharts.com/highcharts/series.venn
I am trying to make a bar chart with VizFrame. Right now this is what my chart looks like:
**edit Chart wont embed? Here is the link: https://imgur.com/5vDzgCs
How would I go about putting the data label inside the bar if it can fit? I tried looking it up, but I am having trouble solving this issue.
Thanks!
to display the data labels inside the bars use the plotArea.dataLabel.position property. As stated in the documentation the property has the following features:
Supported Value Type: String
Supported Values: inside, outside, outsideFirst
Readonly: false
Serializable: true
Default value: "outsideFirst"
Description: Set data label display
position. 'outsideFirst' means if the plot has no space to display data
label outside of the bar, the data label will be displayed inside.
one option to set the property would be for example in the onInit method of the controller of the view:
...
onInit: function() {
oVizFrameBar = this.byId("idVizFrameBar");
oVizFrame.setVizProperties({
plotArea: {
dataLabel: {
position: 'inside'
}
}
}
}
...
I am using primeng pie chart , line chart , bar chart in my application. I was able to change the width and height before updating the primeng version to "primeng": "^5.2.0-rc.1".
It was working fine in the earlier version. After updating the version, width and height of these charts are not working. Can you please help me resolve this issue?
html:
<p-chart type="pie" [data]="piedata" [width]="600" [height]="600" [options]="pieOptions"></p-chart>
component.ts
this.piedata = {
labels: this.chartGroupList,
datasets: [{
data: this.itemCountList,
backgroundColor:this.itemColorList,
hoverBackgroundColor:this.itemColorList
}]
};
pieOptions = {
responsive: false,
maintainAspectRatio: false,
};
It worked after removing the [options].
<p-chart type="pie" width="550px" height="550px" [data]="piedata"></p-chart>
I want to select two or more markers in a chart and perform an action using their coordinates.
Selecting the points is the main problem since I didn't find anything on this topic and I'm not sure if it can be done.
I did something like this in a Pie Chart.
What I did was use "connectToPlot" to change the series color when the user click on it.
This is a resume of the work that I did: change series color when user click on it
See that when you click on the serie, the color changes to gray and if you click again the series returns to it original color (saved it in the attribute "originalColor").
pieChart.connectToPlot("default", function(evt) {
var shape = evt.shape;
var type = evt.type;
if (type == "onclick") {
var fillColor = "rgb("+shape.fillStyle.r+", "+shape.fillStyle.g+", "+shape.fillStyle.b+")"; console.log(shape.fillStyle);
if(shape.rawNode.getAttribute("originalColor")==null)
shape.rawNode.setAttribute("originalColor",fillColor);
var strokeColor = "rgb("+shape.strokeStyle.color.r+", "+shape.strokeStyle.color.g+", "+shape.strokeStyle.color.b+")";
if(fillColor=='rgb(238, 238, 238)'){
shape.setFill(shape.rawNode.getAttribute("originalColor"));
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}else{
shape.setFill('rgb(238, 238, 238)');
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}
}
How can I add click event to my Raphael pie chart ?
var r = Raphael("holder-1",340, 185);
pie = r.g.piechart(150,85, 75, values , {legend: labels, legendpos: "east"});
I got the answer it is:
pie.click(function () { });
Can I pass value to the onclick event? Here can I pass values and labels to onclick` function?
According to the docs for the node attribute, you should just be able to attach events as you would any DOM element using it:
pie.node.onclick = function () { /* Something */ };