Hi everyone, I'm trying to make a copy of this graph using the JS library ChartJS (the graph above was made with Python's Bokeh). As you can see, this isn't really a line graph - it's a scatterplot with connected lines. I'm struggling to recreate this in ChartJS - the library seems to be wanting to connect the dots with curves and fill in the area with the default 'line' chart type, and I'm not sure what to do with the 'scatter' type. Also, I haven't figured out how to make the background of colored as shown. I'd greatly appreciate any assistance or code samples.
In a line chart, straight lines can be obtaines through the option lineTension that needs to be defined on your dataset. Choose zero as shown below.
datasets: [{
...
lineTension: 0
}]
lineTension: Bezier curve tension of the line. Set to 0 to draw straight lines.
In order to obtain colored rectangles spread over the entire chart, this can be done using chartjs-plugin-annotation.js as explained in this answer.
Related
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
Please see the line I have highlighted.
How to add labels on Y-axis
How to make 0 position verticle line as a dotted line.
How to make rounded corner as mention in the photo.
I need to modify the chart js bar graph.
But it's very complicated to modify it. If someone has an idea about chart js your help will be highly appreciated.
Figuring this out requires looking through chart.js configurations here.
To add a label on another line for the Y-axis your labels need the following structure labels: [["Dept1", 81], ["Dept2", 82], ["Dept3", 83]].
Chart.js 2.0 can handle negative values by default so all you need to do is pass in your respective data points. Something like this should be fine: data: [12, -19, 5],
The rounded corners problem is a little trickier. I used an external library linked here. There is some canvas rendering trickery going on. Be sure to star his repo to give the author credit!
Resulting Fiddle here: https://codepen.io/anon/pen/gKRQZG?editors=1000
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.
I've a graph that is being rendered from some points I have in my database.
If I take all the points from the database and place them in the highcharts object, it sometimes "breakes" a random place on the graph and make a straight horisontal line.
Does anyone know any solution for this?
Here is a picture of the graph:
I have to use g.raphaeljs library to create a scatterplot graph. Not only that but i am trying to get a trend line as well, and am wondering how I should go about this.
I was thinking of calculating the mean of the x axis and the y axis and drawing a straight line based on slope.... but am still stuck.
Any help is appreciated.
Also the data used to plot the points on the dot chart is provided by a user.