Custom annotation on the chart area

[Marco Giorgi]

I'm wondering if there is a way to draw custom lines and text on the chart area.

I'm trying to realize something like the attached image:

screenshot030:

1. I need to add at a specific x value a vertical line with a text "end of actual price", possibly with formatting properties, like bold, italic, font, size, etc.
   
2. I need to add at a specific x value a dashed vertical line
   

screenshot031:

1. I need to add at the bottom of the chart a text, with formatting properties like size, font, color, bold, italic that is positioned based on bottom and right distance of the chart container.
   

These drawings should keep their position* even if the chart is resized or during panning and zooming.

*by keep their position I mean that the vertical line will be always at their initial X points, so if I pan the chart area, the lines will pan too.

Many thanks!

Best Regards,

Marco

Attachment: PrintScreen_Files_dbb95fbb.rar

[Dharanidharan Dharmasivam]

Hi Marco, 

Thanks for contacting Syncfusion support. Kindly find the response for your queries below. 

Queries	Response
I need to add at a specific x value a vertical line with a text "end of actual price"	The vertical line can be achieved by using stripline feature. In stripline you need to specify start and end values. Kindly find the code snippet below.  JS:  $("#container").ejChart({               primaryXAxis: {                   stripLine:                       [{                               start: new Date(2017, 4, 1, 0, 0, 0),                               end: new Date(2017, 4, 1, 12, 0, 0),                               color: '#0D97D4',                               visible: true,                               borderWidth: 0                           }],                  },              //...  });  In the above code we have specified start and end values in data time format, since we have rendered the chart primary x axis in data time format. You can change this with respect to your requirement.  You can add the text using the annotation feature. The annotation can be placed anywhere in the chart area. If you need to move the text while panning chart, then you need to render the annotation based on the points by specifying points to coordinateUnit property. Find the code snippet to achieve this requirement.      <div id="actualPrize" style="display:none; white-space: nowrap" align="center">          <div>End of Actual Prize</div>      </div>    $("#container").ejChart({              annotations: [{ visible: true, content: "actualPrize", coordinateUnit: "points", x: new Date(2017, 4, 1, 0,                                                   0, 0), y: 96 }],              //...  });        Here to the div (with id as actualPrize) element, you can specify the style to customize the font properties with respect to your requirement.
I need to add at a specific x value a dashed vertical line	This requirement can be achieved by adding a line series with two points having one y values of minimum and maximum ranges of primary y axis and specify the dashArray property with respect to your requirement.     $("#container").ejChart({            primaryYAxis:                  {                      range:{min: 0, max:100, interval: 10}                  },              series: [                           //...                          {                              points: [{ x: new Date(2017, 6, 6), y: 0 }, { x: new Date(2017, 6, 6), y: 100 }],                              type: "line", fill: 'green', dashArray: '3,3'                      }]              //...  });    Screenshot:    Sample for reference can be find from below link.  http://jsplayground.syncfusion.com/gk3iwwto
I need to add at the bottom of the chart a text,	This requirement can be achieved by adding multiple axes to x axis. In that you can customize the font properties as highlighted below.  $("#container").ejChart({            axes: [{                      intervalType: 'Months',                      labelFormat: 'MMM yyyy',                      valueType: 'datetime',                      orientation: "Horizontal",                      visible: true,                      majorGridLines:{visible: false},                      range: { min: new Date(2016, 11, 6), max: new Date(2017, 5, 6) },                      font: {                          fontFamily: 'Segoe UI',                          //...                      }                  }],  });  Screenshot:    Sample for reference can be find from below link.  http://jsplayground.syncfusion.com/xmhod4cn

Thanks, 

Dharani. 

[Marco Giorgi]

Thanks!

All fine except the last point.

I don't need to customize the axis labels font, but I have to place a text in the bottom right of the chart, indicating the data source.

I needed it there, inside the chart, because it must be there also when I export the chart as an image.

thanks

[Dharanidharan Dharmasivam]

Hi Marco, 

Thanks for your revert. 

Since we are not clear with your query, we would like to know the following details, which will be helpful in further analysis and provide you the solution sooner. 

• You have mentioned that place a text at the bottom right of chart, this means are you need to specify the data source length in the text?
• Kindly provide some screenshot with your requirement, so that we can provide you the sample with respect to that.
• Else provide more information on your requirement.

Thanks, 

Dharani. 

[Marco Giorgi]

you can see in the screenshot031 previously attached.

It's simply a text, the data copyright or the data provider name, like "Data source: U.S. Census 2017"

I need to place it in the bottom right corner of the chart, but outside the plot area, just below the x-axis labels.

I need also that is present in the exported image of the chart

[Saravana Kumar Kanagavel]

Hi Marco, 

 

Thanks for your update.  

 

We have analyzed your query and you can place the text “Data source: U.S. Census 2017” in anywhere in chart area using Annotation feature and currently we don’t have provide support for export the div elements like annotation and data label template for chart. But we are already logged feature request for this and this will be available in any one of our upcoming Essential Studio release. 

 

And we have prepared the sample for your reference and attached in the below location. 

 

Sample Link :  http://jsplayground.syncfusion.com/k2ybg0sd 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[Marco Giorgi]

Dear Saravana,

I hope the annotations will be exported also when the chart is exported as an image in the next release.

In the meantime, I'd like to show another problem I'm facing with the annotations:

On the playground made by you ( http://jsplayground.syncfusion.com/k2ybg0sd ) you can notice that if you resize the window the annotation lose its vertical initial position.

It would be also very helpful to specify an absolute attachment position for the annotation, like "bottom-right" and a margin. In this case, we are able to place correctly the annotation and it will keep the position during chart resize.

Best,

Marco

[Dharanidharan Dharmasivam]

Hi Marco,  

Thanks for your update. 

We have analyzed your query. We have achieved your requirement using preRender and afterResize events of chart and need to place the annotation with respect to pixels by specifying coordinateUnit property as pixels. Find the code snippet below to achieve this scenario. 

JS: 

<div id= "text" style="font-size:12px; display:none;width:130px; height: 20px;text-align: center">Data source: U.S. Census 2017</div> 

 

$("#container").ejChart({ 

       //... 

       annotations:[{ visible : true, content : "text", region : "chart", coordinateUnit : "pixels" }], 

       preRender: "chartPreRender", 

       afterResize:"resize", 

}); 

 

function resize(sender){ 

              var annotationEle = document.getElementById("text"), 

                      chart = $("#container").ejChart("instance"); 

              chart.model.annotations[0].x = sender.data.width - parseInt(annotationEle.style.width) + padding; 

              chart.model.annotations[0].y = sender.data.height -parseInt(annotationEle.style.height); 

              chart.model.size.height = sender.data.height; 

              chart.model.size.width = sender.data.width; 

              chart.redraw(); 

} 

 

function chartPreRender(sender) { 

              //Annotation element 

              var annotationEle = document.getElementById("text"); 

              sender.model.size.width = $("#container").width(); 

              sender.model.annotations[0].x = parseInt(sender.model.size.width) - parseInt(annotationEle.style.width) + padding; 

              sender.model.annotations[0].y = parseInt(sender.model.size.height) -parseInt(annotationEle.style.height); 

} 

Here in the preRender event, we have assigned the x and y values of annotation in terms of pixel from  the difference of width and height from chart size and div(annotation) element size as highlighted above. And when the chart is resized, the afterResize event will be triggered and we can able to get the width and height of chart from this and assigned to annotation. To achieve this scenario, you need to specify the size to annotation div element. You can change this with respect to your scenario. 

Screenshot: 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/rzfi2rdo  

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani.