Good morning:
I want to display my bar charts tick mark labels at an angle. Is that possible? My code, using a simple chart from Google is included.
Thanks for your assistance,
Natalie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300,
'hAxis':{
ticks: [250, 300,],
gridlines: {color: 'blue'},
textStyle:{color: 'blue',}
},
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
just add slantedText: true to your configuration options
if you need a specific angle, use slantedTextAngle: number
see following example...
google.charts.load('current', {
callback: function () {
new google.visualization.BarChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]),
{
title: 'How Much Pizza I Ate Last Night',
width: 400,
height: 300,
hAxis: {
ticks: [250, 300],
gridlines: {color: 'blue'},
// slant hAxis labels
slantedText: true,
slantedTextAngle: 33,
textStyle: {color: 'blue'}
}
}
);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I tried so many time to ask this question but no one was able to help me so I decided to deleted the previous question and reask with taking into considerations the answers that I received.
I have this chart created with chartjs, as you can see you can hover over points to see their coordinated or data, I would like to have an option to show them without having to hover. The reason why I want to do this is because I am going to add export to pdf, and it exports whatever it can see on the HTML , and exporting a chart without its values would be unreadable to the end user.
Note (I don't know if this matters but I am using django and I did not do any npm installation of datalabels)
Another Note : I was told that I have to register the plugin before using it, with
Chart.register(ChartDataLabels); but adding it the chart script just causes the chart to disappear.
.cann {
border: 3px solid darkgrey;
padding: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
width: 650px;
height: 250px;
margin-left: 3em;
}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0-alpha"> </script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function (){
Chart.register(ChartDataLabels);
var ctx = document.getElementById('myChart');
window.myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
data: [12, 19, 3, 5, 2, 3],
label: 'Advisor Closed MTD',
backgroundColor: 'rgb(192,111,94)',
barThickness: 25,
datalabels: {
color: '#FFCE56'
}
}],
},
options: {
responsive: false,
plugins: {
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'blue'
}
}
}
}
}
}
);
});
</script>
<canvas id="myChart" class="cann"></canvas>
How about instead of reposting and deleting you post each time so people dont know whats wrong you actually keep your post so people can actually help you because with what you provide its working fine, chart shows, with register the plugin shows so unless you point out where its going bad and people can see it you wont get any better answers
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.2.1">
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0-rc"></script>
<canvas id="turn_over_line" class="cann"></canvas>
<script>
// Turn over line chart
$(document).ready(function() {
Chart.register(ChartDataLabels);
var ctx = document.getElementById('turn_over_line');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [0, 1, 2, 3, 2, 3, 0.5, 8, 4, 2],
datasets: [{
backgroundColor: '#ccddee',
borderColor: '#5566aa',
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}]
},
options: {
legend: false,
tooltip: false,
plugins: {
datalabels: {
align: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
var invert = Math.abs(value) <= 1;
return value < 1 ? 'end' : 'start'
},
anchor: 'end',
backgroundColor: null,
borderColor: null,
borderRadius: 4,
borderWidth: 1,
color: '#223388',
font: {
size: 11,
weight: 600
},
offset: 4,
padding: 0,
formatter: function(value) {
return Math.round(value * 10) / 10
}
}
}
}
});
})
</script>
Actually my code was perfectly fine, I appreciate the effort of the guy who kept posting the same answer that did not help, I finally figured out that the issue is in my chartjs version , so if you are facing the same issue with chartjs 3.0.0-alpha , 3.2.1 seemed to fix it for me.
Look at this simple google chart. I would like to get rid of the unnecessary padding space between the hr tag and the upper part of the graph.
(I guess it is for title but i'm not using titles.)
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle : {
fontSize:1
},
title: null,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
EDIT
I've accepted wahab memon's answer because it addresses directly my original question.
However, solving my original problem introduces - or reveals, instead - another vertical spacing problem at the bottom.
Look at this very tall graph (tall graph makes sense eg. for bar charts with many independent values). The 'spacing' up and down to the horizontal axis title is unnecessarily big:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>
There should be a way to tell to Charts to apply these rules:
do not use title at all (omit the space as well)
use a sane horizontal axis labelling at the bottom (with the label's native size)
use all the remaining space for graph itself.
I wonder if it is possible in any way.
You can provide chartArea config in options which take height and width of chart. By using that the extra spacing will be utilized by your chart view.
Refer the code below or fiddle:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle: {
fontSize: 1
},
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
I want to draw a line in front of a candlesticks chart with google combo chart.
With this code, the line chart is drawn behind the candlesticks chart like the image below.
How can I change the z-axis of charts?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month', 'Low', 'Open', 'Close', 'High', 'Line'],
['2004/05', 80, 100, 90, 120, 1.2],
['2004/06', 70, 120, 95, 150, 1.8],
['2004/07', 60, 110, 80, 140, 1.9],
['2004/08', 85, 130, 92, 190, 2.8],
]);
var options = {
title : 'Candlesticks with line chart',
hAxis: {title: 'Month'},
seriesType: 'candlesticks',
series: {
1: {type: 'line', targetAxisIndex: 1}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I would like to customize values of vertical axis in google chart. In their documentation I've found property for this.It's placed between comments (// ---additionaly added..) in the code, but the graph is not being drawn. Does anyone knows what could be the problem?
<link rel="shortcut icon" href="images/superGear.ico">
<link rel="icon" type="image/png" href="images/superGear.png">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
// ADDITIONALY ADDED--------------
vAxis: {
viewWindowMode:'explicit',
viewWindow:{ min:90, max :100 }
//---------------------------------
};
var chart = new google.visualization.AreaChart(document.getElementById('lastMonth'));
chart.draw(data, options);
}
</script>
And div placed into body for displaying the graph
<div id="lastMonth" style="height: 500px;"></div>
You are missing the closing } for the vAxis option:
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
min:90,
max: 100
}
}
The following code makes a horizontal stacked barchart that looks like this:
If I change the height attribute to 50 and the groupWidth to 40%, the legend disappears and the chart looks like this:
Question 1: How can I set the height of the bar and still show the legend?
Question 2: How can I get the horizontal and vertical axis to disappear?
What I am really trying to accomplish is a picture like this:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[' ', 'Sales', 'Expenses'],
[0 , 1000, 400],
]);
var options = {
isStacked: true,
width: 200,
height: 60,
vAxis: {gridlines: {count: 0}},
hAxis: {gridlines: {count: 0}},
bar: {groupWidth: "90%"},
legend: {position: 'top'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" ></div>
</body>
</html>
Set the chartArea.top option to move the chart area down and give the legend room to draw:
chartArea: {
top: 15
}
jsfiddle