Working on a google chart and by dragging to horizontal it zooms. So wondering if its possible to also drag to vertical with the horizontal. I tried to copy the explorer and change horizontal to vertical, that didn't work out.
explorer: { actions: ['dragToZoom', 'rightClickToReset'],
axis: 'horizontal' },
explorer: { actions: ['dragToZoom', 'rightClickToReset'],
axis: 'vertical' },
Related
I'm using the Nivo stacked bar chart to show a score range on the bar. To do this, I've used the markers prop. I've almost got it looking the way I'd like except the markers extend beyond the bar and it's not what I need.
When someone asked the same question on Github, it looks as though there isn't currently an easy way to do this. plouc, the creator of nivo said the following:
short answer, you cannot :/ However you can use an extra layer to achieve the same result, using the layers property and adding an extra component.
The photo attached is from the Nivo documentation on adding a marker (clicking on the Story tab will show basic code).
Here is the source code for the markers item. If you search for width throughout the document, you can see that it's set in the x2 of the line. Scrolling down further, you can see there is a strokeWidth property, but from what I can tell it only controls the thickness of the line, not how wide it is.
Can someone please let me know what I missed?
Here is my code. I am displaying two markers on my bar chart so there are two marker objects passed in. I've removed unrelated Bar props for simplification.
<NivoBar
data={data}
keys={['floor', 'pattern', 'ceiling']}
markers={[
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: ceiling,
lineStyle: {stroke: 'red', strokeWidth: 2},
legend: `${ceiling}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange', fontWeight: 'bold'}
},
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: floor,
lineStyle: {stroke: 'red, strokeWidth: 2},
legend: `${floor}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange, fontWeight: 'bold'}
}
]}
/>
I have a line chart rendered with Chart.js and I display the X axis at the bottom:
xAxes: [{ type: 'linear',
position: 'bottom',
I would like to have two X axis, one at the bottom and one at the top.
I see in the documentation that position is a string, thus one value only.
Is it possible to accomplish this?
This is an old question, but I just had the same problem. Luckily the value of xAxes is an array, so you define multiple axes like this:
xAxes: [
{ position: 'top' },
{ position: 'bottom', ... other definitions here ... }
]
I'm trying to reproduce some of the Google Analitycs line charts styles with the Google Chart lib.
GA:
Google Line Chart:
There are 2 things that I'm struggling with reproducing:
I can't find a way to fill the area below the line with a background color
I did not find how to make the dots on the line to be always displayed (currently, I can display one of them when clicking on the line)
They are using an Area Chart, not a Line Chart. https://developers.google.com/chart/interactive/docs/gallery/areachart
For the points appearing on the line all the time, see Points documentation.
https://developers.google.com/chart/interactive/docs/points
Just off the top of my head, here's some other settings of note (details for all of these appear at the bottom of the AreaChart documentation page):
var options = {
legend: {
position: 'top',
alignment: 'start'
},
vAxis: {
textPosition: 'in'
},
focusTarget: 'category' // if multiple lines, data for all appear in tooltip
};
visualization.PieChartwithpieHole, I just want to give some custom text insidepieHole` is this possible? Any idea how to do his?
My code is
var chart6 = new google.visualization.PieChart(document.getElementById('chart6'));
chart6.draw(data, {width: 650, height: 259, title: 'Browser bounce rate',
colors:['#058DC7','#50B432','#ED561B','#EDEF00','#24CBE5','#64E572'],
areaOpacity: 0.1,
pieHole: 0.4,
hAxis: {textPosition: 'in', showTextEvery: 5, slantedText: false, textStyle: { color: '#FFFFFF', fontSize: 10 } },
pointSize: 5,
chartArea:{left:0,top:30,width:"100%",height:"100%"}
});
There are no chart options that will let you put text in the hole; you have to layer other elements on top of your chart.
If you don't have to worry about older versions of IE, you can actually layer the HTML under the chart instead of on top, and set the chart's backgroundColor option to "transparent". This will let the text show through the hole, but won't block any mouse interactions with the chart. If you have to code for IE < 9 as well, you have to layer on top (at least in IE < 9), as the Visualization API does not support transparency in IE < 9.
I am generating this Google Line Chart using the Google JS API. As you can see, the labels are very narrow. How do I make it so that the whole label text is visible?
Here are some samples based on the google code playground line charts. Adjusting the chartArea width option gives more space for labels:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
chartArea: {width: '50%'}}
);
If it's an option, you could also position the labels beneath the chart, which gives considerably more space:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
legend: 'bottom'}
);
Expanding the chartArea option to a width of 100% solved the problem for me. Contrary to the documentation, the chartArea does include the legend. I used a PieChart but the same option is available for the LineChart.
var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);
Reference.
None of the previous answers worked well for me. Setting width to less than 100% centers the plot area and leaves too much unused space on the left. Setting it to 100% is not a solution either.
What worked well - see live working fiddle - is setting the right value to accommodate the legend, then adjusting the left value eventually, for the Y axis title and labels. The plot area width will adjust automatically between these two fixed margins:
var options = {
...
legend: { position: 'right' },
chartArea: {
right: 130, // set this to adjust the legend width
left: 60, // set this eventually, to adjust the left margin
},
...
};
There is an option in legend.textStyle we can customize legend text styles inside google charts
var options = {
legend: { textStyle: { fontSize: 78 //size of the legend
} }
}
You need to make the chart wider or your labels shorter.