Hi I need to modify google chart. Where the labels are to be at bottom with two columns.
What i have :
What i Need:
I tried Label : {position: 'bottom', maxLines: 5}
but it says maxlines only works with position : top .
Please let me know if this is possible.
Thanks
Related
I want to customize the label of the tooltip on chart js. I just want to show as bold the value of portfolio (+2,5%).
I found this example:
https://jsfiddle.net/nosensus/hhcyhjf9/
When i apply it, my tooltip is always on the left bottom, not on the chart.
How can fix it? I am using Chart.js 2.9.4 version and developing with Angular.
tooltip of the chart should be like this
Put the text you would like to be bold between these tags:
<strong>...</strong>
Like below :
tooltip: {
trigger: 'item',
formatter: '<strong>{a}</strong> <br/> {b}:{c}'
},
example
I am working on legacy code from a previous developer and they used highcharts.js (v3.0.1). The xAxis is landing within the graph (screenshot) and I can't sort out why this is. I tried to recreate this in jsfiddle but I can't get that axis to move. I thought that maybe it was a bug in the version but I can't get it to replicate so I'm thinking that is has to be something within the sites own CSS that is manipulating it, however, it's built with g, rect, and text tags which I don't see in any of the custom CSS files.
I've looked through other Highchart.js posts on here but I haven't seen this issue posted yet. Does anyone know what I'm missing?
EDIT: I forgot to mention this but all the usernames are centered text-center
Check exactly how xAxis labels are aligned. As I can see they are rotated vertically so it is important to set appropriate labels align property:
xAxis: {
categories: ['Apple', 'Samsung', 'Dell', 'Lenovo'],
labels: {
align: 'left',
rotation: 90
}
}
Demo:
- labels align center: https://jsfiddle.net/wchmiel/29b4qejc/
- labels align left: https://jsfiddle.net/wchmiel/56evyrxj/
Api reference:
https://api.highcharts.com/highcharts/xAxis.labels.align
are you use the labels padding ?
https://api.highcharts.com/highcharts/xAxis.labels.padding
Be sure that the number is greater than 0.
I am trying to set up Chart.js in a django app using vertical bars, but I am having trouble using the labels. My data is withing the range [-100;+100] and I would like to be able to show one label on top of the chart and another one at the bottom.
Right now I only manage to put label at the bottom of the chart ..
enter image description here
and would need it to look like that :
enter image description here
any idea how to achieve that ?
Raphael
Inside of the options object, add two xAxes scales:
scales: {
xAxes: [{
display: true,
position: 'top'
},{
display: true,
position: 'bottom'
}]
}
There are a lot of examples on the website and github
I am using AmCharts in my project and I am trying to show the Legend Text in my every charts for clear visibility purpose but I unable to set, So far I tried this but it wont work everywhere.
"legend" : {
"align" : "left",
"marginRight" : 200,
"autoMargins" : false
},
Please find the attached image files for more clarifications.
Thanks
You want the graph's labelText to equal [[value]] and the graph's labelPosition to equal "top" for the bar graph.
You need to use chart.legend field.
Here is a working fiddle - https://jsfiddle.net/6cg5swxL/4/
I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt