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.
I want to change the color of plot numeric values(1000, 2000...9000) as shown in below snapshot. I couldn't find an option to do so in highcharts api.
Whilst your comments are't that clear I believe you want the xAsis lines color changed:
xAxis: {
lineColor: '#FFFFFF'
}
Add the above to the highcharts object: graph.highcharts({});
See here for more details: http://api.highcharts.com/highcharts#xAxis
Edit
In that case you'll still want the xAsis. Thankfully highCharts let us do things as simply as CSS:
xAxis: {
labels: {
style: {
color: '#fff'
}
}
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.
I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks
pass the options like this
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
add this to your options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.
In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.
In case a feature is supported by both the Material chart sometimes requires different format for the options.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/
It is easier using the options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.
Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?
See Google Charts documentation.
If you want to do like this then it will help. I use stepped area chart in the combo chart from the Google library...
where the values for each stepped area is the value for ticks.
Here is the link for jsfiddle code
Simply add background option
backgroundColor: {
fill:'red'
},
here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/
You can do it just with CSS:
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}