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
Related
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.
I am using Chartist and svgdom in Node.js to generate a line chart. But the label names are too long and they run over each other.
This is how it looks like:
I saw #375 issue in Chartist and they tried to tilt the labels using CSS, but i think rotating the X-Y axes is a better idea, if possible.
What can i do here?
I'm not sure about flipping it, but as another option, you could make the graph a larger fixed width. Then make it's parent container smaller(screenwidth) and make the entire chart scroll-able horizontally.
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.
I have a columnrange chart, but I think the answer (if there is one) will be applicable to any of the bar/column chart types.
Working fiddle >> http://jsfiddle.net/lunchboxbill/8Yvfs/10/
I have a nice fat border around the first bar. Is there a way I can set it so that the border only displays on the left hand side?
A CSS Highcharts equivalent of "border-left" if you like.
borderLeft: 10
Thanks in advance.
In general, in SVG it's not possible to apply border only for a part of rect. It would require to draw another path for it, just like that SO question.
And, as you can see in API, only borderWidth is possible to set: docs.
I'm using jqPlot for some charting. I would like to highlight regions of the background of the chart. I would like to specify rectangles bounded by the values on an axis that are the entire length of the opposite axis.
Is this do-able out of the box, or must I alter the code? Would this be a good usage for a plugin? Is there documentation on how to write one?
Update: Looks like the fill option on the series might be helpful.
Update 2: Or maybe the GridCanvasRenderer or the ShapeRenderer.
I implemented it myself with about 20 lines of code in CanvasGridRenderer. Works pretty well.