Draw bubbles to show details in line chart using chart js - javascript

I developed a line chart using chartJS. In my chart, I have to draw the data line, and lines with bubbles to show where is the mode, red, and amber in my data. I have figured how to draw the lines. But I don't understand how to draw the bubbles to show the details.
The chart I need to draw is shown in the picture:
Is there any idea how to draw the chart ?

I have found the simple solution.
There is plugins in chartJS called chartjs-plugin-annotation.
These plugins help you make arbitrary lines in the chart and give labels to it.
You can see the example and documentation of chartJS plugin annotation here

Related

How to add text inside scatter plot using Chart.js?

How to render text inside the scatter chart with Chart.Js. The scatter chart (i'm using) has the Zoom/pan plugin, so, i want the text to be anchored to the x/y coordinates of the plot when I'm panning the chart.
Thanks in advance!
Have a look at datalabels plugin. Although you are saying that you have a scatter chart and datalabels does not seem to support this.
Still you could check what you can do with bubble chart, here is a live example.

Creating Kagi Chart with Highcharts/Highstocks

I have Highcharts integrated into my project and would like to create Kagi chart. It looks similar to Step Line chart, however, the thickness/thinness of the lines cannot be handled as currently highcharts doesn't provide any such options.
Is there any way to tweak the Step Line chart or any available charts in highcharts to create Kagi chart shown on StockCharts (http://stockcharts.com/school/doku.php?id=chart_school:chart_analysis:kagi)?
Need a quick solution for my problem.
Thank you!

Draw special line with js framework

I want to draw a line with x and y axis like this .
I searched Google and have found an example based d3. It can draw spline chart, but i can not find the kind of chat.
Can d3 or c3 or any others framework draw line like this? What function should I use?
This is a simple Line chart, Given that you provide the correct data points. You can easily draw that. We cannot help you since you have not shared your work.
Check this link for more info.

How to set curve to the labels in the Highchart Pie Chart

I'm using Highcharts JS library for drawing a pie chart where I have to show some labels in circular format. In my case, it's name of projects which I wanted to show in it's own block aligned with arc. See my code here Jsfiddle
I've tried with some other JS libraries like CircleType and Arctext to give the curve shape for these labels. But for this, the attribute ID needs to be set for the particular text which I'm not able to do. By modifying Highcharts.js, I can manage to set ID for the Title of chart and when I set the property like jQuery('#myid').arctext({radius: 50, rotate: true}); the title disappears.
So is it feasible to do this task in the graph?
Any help will be appreciated.

Legend doesn't show all line's on line Rgraph

I'm using Rgraph to make a line graph with multiple line's on it. The problem i'm having is that some graphs i'm making can have over 30 lines on them which means the legend doesn't show all the lines displayed on the graph.
I've looked through the properties of the Rgraph but can't find something that would help me. Is there a way that I can display all this information on the legend in some way, ie a scrollbar.
Cheers
You could use the HTML key. That isn't constrained by the size of the canvas. Or make your own labels with HTML.

Categories

Resources