In my line chart I have done this,
highlighter: {
show: true,
tooltipLocation: 'ne'
},
On chart if I have one line with three data points then the points are plotting correctly but the wrong tooltip is being getting displayed.Specifically, the tooltip is getting shuffled i.e. for one data point it is showing tool tip of other data point.
Does display of tooltip depends on, what order data is coming?
I got this!!!
Tooltip depends on the order of data points we are passing:)
Related
I have encountered an issue with the C3.js tooltip not being triggered after I fill the areas between two lines using d3.svg.area. Fiddel:
Tooltip disabled by areas filling in between two lines
As we can see from the example, when we hover to the point outside the area, the tooltip will show up; but when we move to the point inside the area, nothing will be shown. I assume that the d3.svg.area has been impacting the C3.js tooltip behaviour, but what/where exactly? Any one got ideas about this?
I also tried to set the z-index of the area to be smaller than the line and circles, but it does not help at all.
I added the code below and set breakpoint, and it was not hit when hovering to the first point.
tooltip: {
format: {
title: function(d) {
console.log(d);
return d;
},
} }
Any help is appreciated. Thank you.
I want to change the kendo chart type dynamically. I am referring to http://demos.telerik.com/kendo-ui/chart-api/index link. I made a change in this code and added one more chart type "area" along with other three chart types. But I see a weird behavior. After clicking on "Area" chart type option the color of the chart gets faded. Then if I click on any other chart type also, the color looks faded. But if I don't click on Area chart type option then color is intact. This happens for all the color themes. Anyone aware of any reasoning or solution for this behavior.
Thanks in Advance.
I saw this issue specifically when changing from the "pie" type to the "area" type. The issue ended up being that my datasource had a two series in it when I was rendering the pie chart, and when I changed to the area chart the pie chart had corrupted the chart config a bit. I modified my code to ensure that the pie chart always has a single series of data, and instead of calling "redraw", I called "refresh" when I changed the chart types.
I think what I am asking is impossible, or at least so complex/hacky it would not be worth it-but in case I am wrong...please let me know.
I have a series of 4 kendo dataviz bar charts, each representing the same set of objects, each chart graphically displaying one property of the objects. What I would like is if a marker on one chart is clicked (so that object is "selected"), to highlight this object's marker on the other 3 charts. See pic for example:
I have looked through the Kendo Dataviz website/docs, inspected the SVG markup, and looked through the object returned on the series click (in Visual Studio), but haven't found anything that could be used to accomplish this. The one thing I have come up with is redrawing all the charts with the selected item "marked" within the data array so when it is redrawn, that item can be redrawn with a different color...but I'd like to avoid redrawing all the charts each time, if possible.
Does anyone have any suggestions? I would greatly appreciate ideas, the least complex the better. Thanks so much!
The closest way I know of achieving this without a redraw would be to use the axis selection property as a selection slider with a restricted width to one column range and prevent resizing. This would simulate a selection highlight without redrawing.
You can also use plotBands property on the CategoryAxis. This is how I am doing it:
$("#chart").data("kendoChart").setOptions({ categoryAxis: { plotBands: [{ from: index, to: index + 1, color: "#ffd0c0", opacity: 0.4 }] } });
I have a chart that shows the number of visits and ratio of sales / visits. Visits are displayed using columns, while the sales / visits ratio is displayed using a line chart.
I wish to move the ratio labels to the right of the chart. Currently, the volume appears on the right hand, secondary axis.
http://jsfiddle.net/2zcLL/8/ (I can't get it to work in jsfiddle, but works fine locally?)
The issue I am having revolves around how Google requires combo charts to be set up, that is, column data series must come before the line data series to work.
What I required looks something like this:
series: {0: {type: "bars", targetAxisIndex:0}, 2: {type: "line", targetAxisIndex:1}},
But the above doesn't work. Any ideas?
First of all, ComboCharts do not require your data series to be in any particular order. You can put bars, line, area, steppedArea, and candlestick type series in whatever order you want.
Second, you only have two data series, so the series option should be:
series: {0: {type: "bars", targetAxisIndex:0}, 1: {type: "line", targetAxisIndex:1}}
Here's an exmple of this working: http://jsfiddle.net/asgallant/m4qwT/. Note that I increased the width of the chart to show the axes properly (they don't display at all given the options as you specified them).
I am using dc.js, crossfilter.js to do dimensional charting.
The chart is not correctly displaying the y-axis data i.e. showing 00000, 50000, 00000, 50000 alternatively in the y-axis. I am doing console level logging of the group and it is showing correct value.
I have segregated the problem into a jsfiddle
Any clue on what I am doing wrong?
I think it is just clipped because it is too wide. Try setting the margins:
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#marginsmargins