I have created a barchart that works properly the way I want. Right now, I'm trying to add a linegraph to overlap the bars, but when I run the code, the linegraph appears, but the bars disappear. It seems pretty simple to add the linegraph, but for some reason it's not working. I'm not getting any mistakes in console either.
var x_text = ["Comodities","Consumer Discretionary","Utilities",
"Health & Biotech","Global Real Estate","Financials",
"Emerging Market Bonds","Technologies","Industrials",
"Oil & Gas","China Equities","S&P500"];
//
var trace1 = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var trace2 = {
x: x_text,
y: [-0.1,-0.1,2.3,3.3,1.0,0.4,0.9,3.0,-0.1,-1.4,3.0,0.2],
mode: 'lines',
line:{
color:'black'
},
type: 'scatter'
};
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: arrow(),
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv',data,layout);
Oh dam, my trace1 had braces+curly braces around the values, which worked for only the bar, but made it dissappear when the linegraph was called.
Related
I want to plot two axis (bar + scatter) on a plotly chart with javascript, but I can't get the zero baseline of the second y-axis to align with the first axis.
Here is the result of the current version:
The Zero-line of the right y-axis (the scatter line) is higher than the zero-line of the left y-axis. I would want to have them on the same height in the plot, basically overlapping.
I create the Plotly object like this:
const trace1 = { x: dates, y: y1, name: 'item', type: 'bar' };
const trace2 = { x: dates, y: y1_cumsum, name: 'Total', yaxis: 'y2', type: 'scatter' };
Plotly.newPlot(MYDIV, [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
I tried to change position in the config, but this does only affect the x-position, not where the y-axis starts. I can't find any suitable attribute in the docs (https://plotly.com/javascript/reference/layout/yaxis/) that would achieve that.
How can I set the position of the second y-axis to be the same as the first one?
Thanks.
Assuming you don't have negative values in your data, you can set layout.yaxis.rangemode = 'tozero'for one or both of your axes.
const trace1 = {
x: [3, 4, 5],
y: [0, 15, 13],
mode: 'markers+lines',
type: 'scatter',
yaxis: 'y2'
};
const trace2 = {
x: [3, 4, 5],
y: [1, 0, 3],
type: 'bar'
};
Plotly.newPlot('myDiv', [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right',
rangemode: 'tozero'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
I want to create pie chart using plotly library. So basically my app has an option to select labels and values field from a dropdown list and there could be any data. I am passing that to construct a pie chart. Here is the problem arises- when I select proper labels and values then it is showing the pie graph and when I select some other options it is not showing anything. For that scenario I want to show some message like - "PIE CHART CANNOT BE CREATED FOR SELECTED DATAS" or something like that. How could I achieve it?
Here is the code -
let object = {};
object = this.graphService.plotPie(
this.x_axis,
this.y_axis,
this.x_axis_title,
this.y_axis_title
);
Plotly.newPlot(
"myDiv1",
object["data"],
object["layout"],
{ showSendToCloud: true },
{ responsive: true },
{ scrollZoom: true }
);
-----------------------------------------------------------------------------
plotPie(x_axis, y_axis, x_axis_title, y_axis_title) {
var data = [
{
values: [19, 26, 55] || x_axis,
labels: ["Residential", "Non-Residential", "Utility"] || y_axis,
// domain: {column: 0},
name: "Pie",
hoverinfo: "label+value",
hole: 0.4,
type: "pie"
}
];
var layout = {
// title: `Pie Graph ${x_axis_title} vs ${y_axis_title}`,
font: {
family: "Arial Black",
size: "14px"
},
height: 300,
margin: {
l: 50,
t: 40,
b: 40,
r: 40
},
legend: {
orientation: "h",
x: 0,
y: 1.3
},
xaxis: {
showgrid: true,
zeroline: false,
showline: true,
linewidth: 2,
linecolor: "black",
tickfont: {
size: 11
}
},
yaxis: {
showgrid: true,
zeroline: false,
showline: true,
linewidth: 2,
linecolor: "black",
tickfont: {
size: 11
}
},
plot_bgcolor: "white",
paper_bgcolor: "white",
showlegend: true
};
return { data, layout };
}
Actual result would be - For valid data selection it should display the pie chart and for invalid data selection it should display some Error message;
When the names of x axis are big the text is overlapping. Is there any property to fix this ? Fit:true doesn't resolve the problem.
Example
You can use x axis tick rotate, example: http://c3js.org/samples/axes_x_tick_rotate.html
There is another solution where you can use
multiline: true
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 0,
multiline: true
}
}
}});
I have a Canvas JS chart and if the values are 0, I'd like to hide the labels. 2 of my datapoints are non-zero. My JavaScript is:
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: ""
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
toolTipContent: "${y} - #percent %",
dataPoints: [
{ y: debt, indexLabel: "Debt Payments" },
{ y: housing, indexLabel: "Housing" },
{ y: utilities, indexLabel: "Utilities" },
{ y: foodandsupplies, indexLabel: "Food and Supplies"},
{ y: transportation, indexLabel: "Transportation" },
{ y: health, indexLabel: "Health"},
{ y: otherDebts, indexLabel: "Other payments"}
]
}
]
});
chart.render();
The outcome of the JavaScript is:
Pie Chart
I would appreciate any help with this. Thanks!
You can hide the indexLabels for dataPoints with zero as y values by going through the chart options and setting the indexLabel as empty string for all such dataPoints.
Add this code snippet before rendering the chart i.e. chart.render() and it should work fine.
for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
if(chart.options.data[0].dataPoints[i].y === 0)
chart.options.data[0].dataPoints[i].indexLabel = "";
}
Hope it helps.
I am creating a pie chart that has two slices of the pie. I know I can add a fill property and a color to say what color I want the entire pie chart but I want to have one slice of the pie chart blue and the other slice green.
majpieChart = new Chart("majorPieChart");
majpieChart.setTheme(Claro).addPlot("default", {
type: "Pie",
font: "normal normal 10pt Tahoma",
fontColor: "#1c3923",
labelWiring: "#1c3923",
radius: 100,
labelStyle: "columns",
htmlLabels: true,
startAngle: -10,
fill : {colors: [ {offset: 0, color: "#00ff78"},
{offset: 1, color: "#7f0043"}
]
}
}).addSeries("Major",majBreak);
I tried this new fill hoping it would give me the same effect requested above but it gives more of a rippling color looking effect. Any thoughts?
you can create your own simple Theme, this is the simple theme, if you want gradients then would have to create a more complicated theme. http://dojotoolkit.org/documentation/tutorials/1.8/charting/
require([
"dojox/charting/Chart",
"dojox/charting/themes/Claro", "dojox/charting/plot2d/Pie",
"dojox/charting/SimpleTheme",
"dojo/domReady!"], function (Chart, Claro, Pie, theme) {
chartData = [{
x: 1,
y: 19021
}, {
x: 1,
y: 12837
}, ];
majpieChart = new Chart("majorPieChart");
majpieChart.setTheme(new theme({
colors: [
"#00ff78",
"#7f0043",
"#8ecfb0",
"#f8acac",
"#cc4482"]
})).addPlot("default", {
type: "Pie",
font: "normal normal 10pt Tahoma",
fontColor: "#1c3923",
labelWiring: "#1c3923",
radius: 100,
labelStyle: "columns",
htmlLabels: true,
startAngle: -10,
}).addSeries("Major", chartData);
majpieChart.render();
});
Fiddle::http://jsfiddle.net/YL2Mf/
UPDATE
You can also add the fill color to the chart data:
chartData = [{
x: 1,
y: 19021,
fill:"green"
}, {
x: 1,
y: 12837,
fill:"yellow"
}, ];
Fiddle::http://jsfiddle.net/theinnkeeper/a56Y9/1/