In my app users can add/remove as many series they want to the HighStock component using a piece of UI I wrote. However, when a user adds multiple time-series and the legend is under the chart, it shrinks the chart's height (in favor of the legend). This way the overall height remains constant.
However, I'm interested in having the plotting area keeping the same height and still have the legend be under it, changing the overall height if needed.
code
Here's a fiddle to demo the issue.
Ideas?
set maxHeight property. this will fix the maximum height of legend and gives navigation to legend.
maxHeight: 100,
here is the fiddle http://jsfiddle.net/9vZ8F/2/
instead if you remove
layout:'vertical'
legend will not occupy much space
here is a fiddle for it http://jsfiddle.net/9vZ8F/1/
Hope this is useful to you.
How about doing a calculation on the number of series you have and adjusting the chart height based on that?
var series = [{
name: 'series 1',
data: usdeur
}, {
name: 'series 2',
data: usdeur
}, {
name: 'series 3',
data: usdeur
}, {
name: 'series 4',
data: usdeur
}, {
name: 'series 5',
data: usdeur
}
],
height = 400 + (series.length * 15);
$('#container').highcharts('StockChart', {
chart: {
borderWidth: 2,
height: height
},
legend: {
enabled: true,
layout: 'vertical'
},
navigator: {
//top: 200
},
rangeSelector: {
selected: 1
},
series: series
});
http://jsfiddle.net/SSn4e/
Related
I want to switch from Highcharts to ECharts (preferably 3), but my current graphs have multiple series ('lines' in my case), with each their own yaxis, and it seems ECharts doesn't support this.
These metrics do not relate at all, so they all need their own yaxis. I combine them in 1 chart so they can be compared relative to each other (500 visits, €30000, 3% conversion.. etc). It makes no sense to plot 500 visits and 3% conversion rate on the same yaxis.
Is there a way to give each line it's own yaxis? It doesn't have to be a visible one (since there can only be two with ECharts, left/right of canvas, and that's ok), but the data needs to be plotted to an individual axis.
try this
yAxis: [
{
type: 'value',
name: 'left_yaxis',
nameTextStyle: {
color: '#fff'
},
splitLine:{
show:false,
},
axisLabel: {
textStyle:{
color:'#fff',
}
}
},
{
type: 'value',
name: 'right_yaxis',
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval:'0',
textStyle:{
color:'#fff',
}
},
splitLine: {
lineStyle: {
color: ['#454545'],
}
},
min:0,
//max:800000,
splitNumber:5
}
],
Here ar example from echarts for dual y axis:
example 1
example 2
You can add more than one y axis in echarts by making yaxis element as a array
Yes, ECharts supports multi-axis. See example at ECharts Gallery.
Can any one suggest me the way of adding title to the C3.js line and bar charts ? I have got the following sample but it is for gauge chart. For any c3 chart is there any option to set the chart title?
donut: {
title: 'Title'
}
This was a top google result, so I thought I'd add that this is now part of the library:
title: {
text: 'My Title'
}
More info # https://github.com/masayuki0812/c3/pull/1025
You'd need to fall back to using D3 to add a chart title. Something like:
d3.select("svg").append("text")
.attr("x", 100 )
.attr("y", 50)
.style("text-anchor", "middle")
.text("Your chart title goes here");
I am using this code for my chart.
Code:
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursday', 50],
['Friday', 100]
],
type: 'donut'
},
donut: {
title: "usage "
}
});
Result :
also couldn't find a way and ended up writing the title as the unit and editing the label.
gauge: {
label: {
format: function(value, ratio) {
return "%"+value;
},
show: true // to turn off the min/max labels.
},
min: 0,
max: 100,
units: "Overall Profit"
// width: 39 // for adjusting arc thickness
},
Below is the code for a pie chart i have in my Sencha touch app. The issue i face is that whenever the space to display chart is not enough for all labels there are callout lines and labels, but then i want these callout lines to be shorter in length then they are right now because they do not fit my screen and labels get cut.
I cannot find the correct config property for that.
EDIT - the two charts in image have the same code and are placed in hbox layout in container
{
xtype: 'polar',
itemId: 'pieChart',
background: 'white',
store: 'GraphsStore',
shadow: true,
innerPadding: 25,
//bind the chart to a store with the following structure
//interactions: ['rotate'],
colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"],
//configure the legend.
legend: {
position: 'top',
//width: 100
hidden: true
},
//describe the actual pie series.
series: [{
type: 'pie',
xField: 'g1',
renderer: function(sprite, config, rendererData, index) {
var changes = {},
store = rendererData.store,
curentRecord = store.getData().items[index];
var text = curentRecord.data.g1;
changes.text = text;
return changes;
},
label: {
field: 'name',
display: 'rotate',
font: '8px'
},
donut: 25,
style: {
miterLimit: 5,
lineCap: 'miter',
lineWidth: 1
}
}]
}
Any pointers will be helpful !
Thanks.
In the chart/series/sprite/PieSlice.js, modify the following two lines:
x = centerX + Math.cos(midAngle) * (endRho + 40);
y = centerY + Math.sin(midAngle) * (endRho + 40);
Change the 40 to a smaller number.
Is there a way to create a Legend control for series that belong to Indicator Plot with Dojo Charting.
I've tried some standard well described ways from the documentation. But with no success! Legend are not appearing for Indicator Plot.
Maybe somebody know is it possible to draw legend for this case or not?
Thanks in advance!
EDIT(my code added):
1. id - id of chart dom element.
2. opts.chartOpts - chart options from outside js.
3. legname - id of legend dom element.
4. scale.avg - is just a double value.
this.chart = new Chart(id, this.opts.chartOpts);
this.chart.addPlot("default", {
animate: { duration: 1000, easing: easing.linear },
type: ColumnsPlot,
markers: true,
gap: 1
});
this.chart.addPlot("avgline", {
type: IndicatorPlot,
vertical: false,
lineStroke: { color: "#00ff00", style: "ShortDash" },
stroke: { width: '1.2px' },
fill: '#eeeeee',
font: 'normal normal normal 11px Arial',
labels: 'none',
offset: { x: 32, y: 4 },
values: [scale.avg],
precision: this.opts.precision
});
//Add axis code goes here... cutted for clearance
this.chart.addSeries('Power', chartOptions.data);
this.chart.addSeries('Average', [scale.avg], { plot: 'avgline' });
var tip = new Tooltip(this.chart, "default", { 'class' : 'kaboom' });
var mag = new Magnify(this.chart, "default");
var hightlight = new Highlight(this.chart, "default");
this.chart.render();
this.leg = new Legend({ chart: this.chart, horizontal: false }, this.legName);
And as result of this code I see legend for 'default' plot 'Power' series only. And nothing for 'Average' series.
I'm wondering if it is possible to zoom in on a slice in a pie chart.
My chart is modeled after this example jsfiddle example
chart: {
renderTo: 'container',
type: 'area',
zoomType: 'x',
}
But it doesn't seem to work with pie charts. Am I missing something here?
Ideally, I would have a pie chart with 2 layers, where the outer layer serves as a child of the inner layer. When selecting a child slice, I could then have an entire pie chart showing that slice alone, along with its own children, etc.
Unfortunaltely zoom is not allowed for Pie Charts as its properties show you
x: to zoom in x-axis
y: to zoom in y-axis
xy: to zoom in both axes
but you can use size property with JavaScript to show zooming.
size property demo
I think I found what I was actually looking for. It isn't zoom, but rather the option of capturing click events on slices.
In order to do that, one must use the allowPointSelect attribute, which can be added to a pie chart like this (just one of several different ways):
plotOptions: {
pie: {
shadow: false,
allowPointSelect: true,
},
}
Then in order to capture clicks one has to declare the events attribute in the series being used:
series: [{
name: 'Example',
data: [
{
name: 'Firefox',
value: 45.0
},
{
name: 'IE',
value: 26.8
},
{
name: 'Chrome',
value: 12.8,
},
],
size: '100%',
point: {
events: {
click: function() {
// some code to execute when clicking a slice
alert('Slice name: ' + this.name + ' and value: ' + this.value);
}
}
}
}]
Then in that click function, any javascript code can be executed, and the declared fields in the data can also be accessed. So a second pie chart could theoretically be created on the fly.