Develop Reference

c3.js - c3 graph that has a tooltip with a c3 graph inside

I have a c3.js line graph that represents the evolution of 2 values. I need that the tooltip of the line graph to be a pie chart (tooltip = another c3.js graph).
Here is what I succeeded:
http://jsfiddle.net/owhxgaqm/80/
// c3 - custom tooltip
function generateGraph(data1,data2) {
console.log(data1.name + '\t' + data1.value + '\t' + data2.name + '\t' + data2.value);
var chart1 = c3.generate(
{
bindto: "#t",
data: {columns : [[data1.name, data1.value],[data2.name, data2.value]],
type : 'pie'}
});
}
var chart = c3.generate({
data: {
columns: [
['data1', 1000, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300], ]
},
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
generateGraph(d[0], d[1]);
var divt = document.getElementById("t");
return '';
}
}
});
As you can see I'm binding the "tooltip" with an already existing div so this is not really what I want from c3.js.
Any idea is welcome.
Thanks.

Adding a Chart inside a C3 Tooltip
You can use the tooltip element that c3 already has. In your contents function call the generateGraph function (see next step). Pass in the tooltip element available in this.tooltip in addition to the data.
...
tooltip: {
contents: function (d) {
// this creates a chart inside the tooltips
var content = generateGraph(this.tooltip, d[0], d[1])
// we don't return anything - see .html function below
}
}
...
Your generateGraph function basically creates a c3 chart in your tooltip element (bindto supports a d3 element). We do a bit of optimization (if the data is same, the chart is not recreated) and cleanup (when a chart is recreated it is destroyed and removed from the DOM)
function generateGraph(tooltip, data1, data2) {
// if the data is same as before don't regenrate the graph - this avoids flicker
if (tooltip.data1 &&
(tooltip.data1.name === data1.name) && (tooltip.data1.value === data1.value) &&
(tooltip.data2.name === data2.name) && (tooltip.data2.value === data2.value))
return;
tooltip.data1 = data1;
tooltip.data2 = data2;
// remove the existing chart
if (tooltip.chart) {
tooltip.chart = tooltip.chart.destroy();
tooltip.selectAll('*').remove();
}
// create new chart
tooltip.chart = c3.generate({
bindto: tooltip,
size: {
width: 200,
height: 200
},
data: {
columns: [[data1.name, data1.value], [data2.name, data2.value]],
type: 'pie'
}
});
// creating a chart on an element sets its position attribute to relative
// reset it to absolute (the tooltip was absolute originally) for proper positioning
tooltip.style('position', 'absolute');
}
Note that we set the chart size so that it's more like tooltip content instead of a subchart.
The last bit is a bit hacky - since c3 requires that we set a HTML (which we don't want to do) and because we don't have any other callbacks we can easily hitch onto after the content handler, we have to disable the function that c3 uses to set the html content on the tooltip (this will affect only this chart's tooltip) i.e. .tooltip.html
// MONKEY PATCHING (MAY break if library updates change the code that sets tooltip content)
// we override the html function for the tooltip to not do anything (since we've already created the tooltip content inside it)
chart.internal.tooltip.html = function () {
// this needs to return the tooltip - it's used for positioning the tooltip
return chart.internal.tooltip;
}
Fiddle - http://jsfiddle.net/muuqvf1a/
Tooltip Positioning
Instead of using c3's tooltip positioning you could also size and position the tooltip at the bottom of the chart. Just style .c3-tooltip-container.
Alternatives
Note that c3 also support subcharts (http://c3js.org/reference.html#subchart-show) and data.mouseover (http://c3js.org/reference.html#data-onmouseover) which could also be a cleaner avenues worth exploring.

highstocks - legend position and refresh legend values on mousemove of multiple charts

Here is the scenario. I've multiple highstocks say 10 charts on a single page. Currently I've written 500 lines of code to position the legend, show tooltip and refresh the legend values on mousemove.
No. of legends vary per chart. On mousemove values of all the legends are updated. I need to optimize the code I am using highstocks v1.2.2.
Above screenshot shows 2 charts. Return, Basket, vs Basket Spread are legends and it's values are updated on every mousemove.
Please find this fiddle for example. In my case legends are positioned and updated values on mouse move with hundreds of lines of code. When I move the mouse the legend values of Return and Basket of first chart and the legend values of vs Basket Spread are updated. It's working fine but with lots of javascript code. So I need to optimize it less code or with highstocks built-in feature.
Update
User #wergeld has posted new fiddle. As I've shown in screenshot when cross-hair is being moved over any chart, the legend values of all the charts should be updated.
Is there anyway to implement the same functionality with less code or is there built-in feature available in highstocks ???
Using this as a reference.

Basic example would be to use the events.mouseover methods:
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
var theLegendList = $('#legend');
var theSeriesName = this.series.name;
var theYValue = this.y;
$('li', theLegendList).each(function (l) {
if (this.innerText.split(':')[0] == theSeriesName) {
this.innerText = theSeriesName + ': ' + theYValue;
}
});
}
}
}
}
}
This is assuming I have modded the <li> to be:
$('<li>')
.css('color', serie.color)
.text(serie.name + ': NA')
.click(function () {
toggleSeries(i);
})
.appendTo($legend);
You would then need to handle the mouseout event but I do not know what you want to do there.
Working example.
EDIT:
Here is a version using your reference OHLC chart to put the values in a different legend location when any point in the chart is hovered.
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
//using the ohlc and volumn data sets created at runtime.
var stockVal = ohlc[this.index][4]; // show close value
var stockVolume = volume[this.index][1];
var theChart = $('#container').highcharts();
var theLegendList = $('#legend');
$('li', theLegendList).each(function (l) {
var legendTitle = theChart.series[l].name;
if (l === 0) {
this.innerText = legendTitle + ': ' + stockVal;
}
if (l === 1) {
this.innerText = legendTitle + ': ' + stockVolume;
}
});
}
}
}
}
}

Morris.js Donut labels

I'm having an extremely frustrating time trying to move the data text labels from this donut chart to be outside of the center.
http://jsbin.com/ukaxod/144/embed?javascript,live
the xpos and ypos are generated dynamically, and I can't seem to overwrite them with CSS and I can't find what is setting them in JS. A little help would be very appreciated. thanks

The label in the center is placed there by design and cannot be simply changed.
If you look at the source code you can find these lines:
Donut.prototype.redraw = function() {
// ...
cx = this.el.width() / 2;
cy = this.el.height() / 2;
// ...
this.text1 = this.drawEmptyDonutLabel(cx, cy - 10, this.options.labelColor, 15, 800);
this.text2 = this.drawEmptyDonutLabel(cx, cy + 10, this.options.labelColor, 14);
// ...
}
It calculates cx/cy so that they point to the center of the chart, and generates 2 labels (for text and value).
You can change the source code, or you can try to find the corresponding text tag in the svg code and change its x and y properties.

Highcharts - how can I center labels on a datetime x-axis?

I was having a hard time trying to figure out how to center labels on a datetime x-axis in Highcharts without using categories and tickPlacement (since tickPlacement only works on categories).
My axis was dynamically created so I could not simply set an x-offset or padding, as this would cause axes of different intervals to look strange.
After messing around with the config options I think I may have found a solution using the x-axis formatter and some css / jquery noodling in the Highcharts callback. See my answer below.

The trick is to use the x-axis labels object like this:
xAxis: {
type: 'datetime',
labels: {
useHTML: true,
align: 'center',
formatter: function () {
//using a specific class for the labels helps to ensure no other labels are moved
return '<span class="timeline_label">' + Highcharts.dateFormat(this.dateTimeLabelFormat, this.value) + '</span>';
}
}
You can see that the formatter will keep whatever dateTimeLabelFormat has been set by the user or default.
Then have a callback that does something like this:
function (chart) {
var $container = $(chart.container);
var $labels = $container.find('.highcharts-axis-labels .timeline_label');
var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos;
$labels.each(function () {
$thisLabel = $(this).parent('span');
thisXPos = parseInt($thisLabel.css('left'));
$nextLabel = $thisLabel.next();
nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : chart.axes[0].left + chart.axes[0].width;
delta = (nextXPos - thisXPos) / 2.0;
newXPos = thisXPos + delta;
if ($nextLabel.length || $(this).width() + newXPos < nextXPos) {
$thisLabel.css('left', newXPos + 'px');
} else {
$thisLabel.remove();
}
});
});
In short, this will go through each label and determine how much it should be moved over (using css) by calculating the distance between itself and the next label. When it reaches the the last label, it either moves it over using the end of the axis for the calculation or removes it if it won't fit. This last part is just the decision I decided to make, you can probably choose to do something else like word wrap, etc.
You can see the jsfiddle here
Hope this helps some people. Also, if there are any improvements it would be great to see them here.

Based on the existing answer, there is a much simpler solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
As you see, the extra wrapping of labels is unnecessary (at least if you do not have more than one xAxis). Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).

Maximum bar width in Highcharts column charts

I'm using Highcharts to create some vertical bars (a.k.a. "column charts") a lot like here: highcharts.com/demo/column-basic
Thing is, sometimes there are 30 bars in the chart, sometimes only two. Where then are two really wide bars in the chart, it looks really weird, so the decision was made to set a maximum width for the bars. That way if there are only two then they wouldn't get wider than, say, 50px, but if there were 50 then Highcharts could size them in the way it sees fit.
So my problem is that Highcharts doesn't have a way to explicitly set the maximum width of the columns. Has anyone found a solution to that?

Obviously this question was asked a long time ago when this feature didn't exist, but as of Highcharts 4.1.8 you can do this without any workarounds using the plotOptions.column.maxPointWidth setting:
$('#container').highcharts({
/* Other chart settings here... */
plotOptions: {
column: {
/* Here is the setting to limit the maximum column width. */
maxPointWidth: 50
}
}
/* Other chart settings here... */
});
Below is the JSFiddle of the basic column chart example, modified to show this working:
http://jsfiddle.net/vu3dubhb/
And the documentation for this setting is here: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth

Update: As of Highcharts version 4.1.8 , see Adam Goodwin's answer, below.
For many years, the only way to set the maximum width of the columns, was dynamically via JavaScript.
Basically:
Check the current bar width.
If it is greater than desired, reset the series' pointWidth.
Force a redraw to make the change visible.
Something like:
var chart = new Highcharts.Chart ( { ... ...
//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series = chart.series[0];
if (series.data.length) {
if (series.data[0].barW > MaximumBarWidth) {
series.options.pointWidth = MaximumBarWidth;
/*--- Force a redraw. Note that redraw() will not
fire in this case!
Hence we use something like setSize().
*/
chart.setSize (400, 300);
}
}
See the demo at jsFiddle.

Ultimate solution is to wrap drawPoints and overwrite shaperArgs of each point, especially x-position and width:
(function(H) {
var each = H.each;
H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
var series = this;
if(series.data.length > 0 ){
var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
each(this.data, function(point) {
point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
point.shapeArgs.width = width;
});
}
proceed.call(this);
})
})(Highcharts)
Use:
$('#container').highcharts({
chart: {
type: 'column'
},
series: [{
maxPointWidth: 50,
data: [ ... ]
}]
});
And live demo: http://jsfiddle.net/83M3T/1/

a better way would be has suggested
http://highcharts.uservoice.com/forums/55896-general/suggestions/2079099-manually-set-the-column-width
check this fiddle
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/
just add
series: {
pointWidth: 20
}
in you plot options and thats it . :) enjoy cheers ...

function(chart){
var series = chart.series[0];
//--- Enforce a Maximum bar width
if (series && series.data.length) {
if (series.data[0].pointWidth > MaximumBarWidth) {
for(var i=0;i< chart.series.length;i++)
chart.series[i].update({
pointWidth:MaximumBarWidth
});
}
}
}
http://jsfiddle.net/pXZRV/40/

I used the spacingTop attribute to enforce a maximum pointWidth on a bar chart:
if (series[0].data[0].pointWidth > maximumBarWidth) {
this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
this.isDirtyBox = true;
this.redraw();
}
So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.
This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.
You could do the same with spacingRight and would have a consistent Chart without ugly spaces between the bars.

In my case, setting pointRange to 1 was what I needed. If a category with a box was adjacent to a category without a box (only outliers in a scatter series) the box would be wider than the category.
There is a good explanation here.

I faced the same issue using HighCharts and this is how I fixed it !!
-- Create a wrapper div for the chart, with some minimum width and overflow:auto. (To enable horizontal scroll)
-- Set the "pointWidth" of each bar to the required value. (say, pointWidth: 75)
-- Now set the chartWidth dynamically, based on the number of bars.
Use chartWidth = (number of bars) * (pointWidth) * 2
So, if you have 15 bars, chartWidth = 15*75*2 = 2250px, where 2 is used to create larger chart width, to accommodate spacing between bars.
--In this manner, You can have any number of bars of same width in the scrollable chart ... :)