Using the sample line chart code for Chart.js (http://www.chartjs.org/docs/#line-chart-example-usage), I am able to create a perfect Line Chart in js fiddle or on a standalone page.
The problem is, that exact same configuration code, when inserted into my project and turned into a custom Knockout binding, doesn't show the data labels that should be on the left and bottom edges of the chart. Besides that it looks exactly the same as the sample, like it should.
My code is much too complex to include here, so what I'm looking for is just random spitball ideas of what, possibly, could be causing this to happen? Because Chartjs outputs a Canvas element I am finding it near impossible to diagnose this problem.
Thanks ahead of time for any suggestions!
What a silly problem. It turns out that the default color for the labels is #666, which is the same as my background color. I was using the wrong attribute name to change the color of the labels, the proper attribute to set the "data label" color is: scaleFontColor
Related
I'm facing two problems.
How can I make sure that the whole legend can be seen under the graph? Indeed when the legend is too big three points are added.
My other problem concerns pie charts. How to make all the percentages appear on the graph, by default it puts them only when the place is sufficient on the graph?
Bar Chart problem
Pie Chart problem
Thanks you
Bar Chart Problem : Its the default behaviour. The 3-dots is called ellipses. It is used to truncate the strings to fit the in to the containing box/div. For more info, refer this. This workaround would help you if you wish the axes labels are need to be shown full. In case legend values, please refer this.
Please refrain rom using such long names for the axes as it affects the UX.
Pie Chart Problem : Its the default behaviour of Google Charts to show the values only if the values are sufficient to fit in the place. As a workaround, you can display all the values, in the chart using the option {legend : "labelled"}. Thanks to this Google Forum.
Example JS Fiddle
Chart.js 2.6.0
Expected Output
I have a problem to solve, I needed to generate this chart out of data:
I somehow managed to generate this chart.
Problems
I am searching for best way to detect summit/peak of data-mountains so that I could put a point(arc) at the top.
Is there a way to put labels in x-axis like in the picture above? I mean there is label after every 21 seconds.
Code so far
Gist: https://gist.github.com/shivabhusal/efb48db79128ffd926cc25960a1d875c
I overrode the draw function of Chart.js and drew lines and points on my own.
Any help will be appreciated, thanks.
Note: My data is not guaranteed to be pointy at the summit; sometimes it can get plateau.
Necessary CodePen is https://codepen.io/shivabhusal/pen/LjWyMe?editors=0010
I am using d3.js along with dc.js and Crossfilter. As seen on the below image, the chart should end on 12/31/2016 as there is no data after that but keeps on going. Probably stuck at the last value. This is only happening in line chart. When I use a bar chart it does not happen.
Is this a known bug? Not sure what else I can do? I copied the configuration exactly from the dc.js example page (composite chart) and applied my dataset.
Found the problem. My dimensions were based on dates and some records had a typo in them. Instead of 2013, it had 2103 which caused the problem.
I' have an already made a Stacked/Group multi bar chart with NVD3 which is working great. I need to add a grey background to some of the places of the graphic to inform something to the user.
Does anybody know how to do this?
Thanks!
If I understand correctly you don't want a background for the whole chart. In this case you can always use d3's own insert method selection.insert(name, before) (see the documentation at https://github.com/mbostock/d3/wiki/Selections#wiki-insert ) to display an svg object at a certain in front / behind certain elements...(I guess it would be behind all the groups from you animation basically).
I'm replacing DotNet Charting charts with KendoUI. I need to be able to put a multiple line label on a line chart. See the image below with the red circle on the label. Any suggestions would be greatly appreciated.
See my current chart and the DotNet Cart I need to replace:
Short answer: you can't.
Long answer: You can't, but you there is a bug in Kendo that will let you... sort of.
Kendo is creating an SVG on the fly for your chart. SVGs are just XML, and you can inject XML into the element via the javascript config.
For your label, you have to use elements to position text. See the SVG spec for this element: http://www.w3.org/TR/SVG/text.html#TSpanElement
The problem here is that Kendo uses left-justified text, and you can't change the parent element with this bug. That means you have to offset everything by hand, one pixel at a time. If your text is static, this might work; if it is dynamic, I wouldn't even attempt it.
You might be able to hack something together via JS, and manipulate the SVG on the fly each time Kendo modifies it... but you may as well write a charting library if you're going to that much work.
EDIT: For your use, it might be better to rotate the labels, if you don't have to mirror the old display exactly.