Is there any option which allows me to change x-axis labels position?
As you can see on attached screen it is overlaping the chart area.
I am trying to use labelsOffsety but it is doesn't work.
Maybe I'm doing something wrong?
<script src="jquery.min.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<center>
<canvas id="cvs" width="1000" height="600">[No canvas support]</canvas>
</center>
<script>
var data = [
[1,1,2,3,5,8,13,21,34]
];
var line = new RGraph.Line({
id: 'cvs',
data: data,
options: {
colors: ['blue'],
linewidth: 4,
hmargin: 5,
vmargin: 50,
shadow: false,
'text.angle': 45,
tickmarks: 'filledcircle',
ticksize: 2,
'text.color': 'green',
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
tooltips: ['1','1','2','3','5','8','13','21','34'],
'gutter.bottom': 50,
'gutter.top': 50,
'gutter.left': 50,
'labels.above': true,
'ylabels': true,
labelsOffsety: 20
}
}).draw();
</script>
If you're using the canvas libraries you can use the labelsOffsety option.
Related
I'm using react-chartjs-2 (version 4.3.1 ). As you can see in image, even if I use same component, width & height aren't same anymore because of labels. I want to display like left side piechart even though there're many labels in right side. How can I solve that?
codes
<Pie
height={400}
data={{
labels: labels,
datasets: [
{
label: "Label 1",
data: data,
backgroundColor: [
palette.primary.main,
palette.utility.maroonRed,
palette.text.primary,
palette.primary.grey,
palette.secondary.dark,
palette.primary.subtle
],
},
],
}}
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: "bottom"
},
}
}}
/>
)
Since the chart is limited to the size of the canvas you have 3 options:
Limit the amount of legend items shown with the filter callback
Make the canvas bigger so the chart has more space to render everything depending on the labels
Disable the legend so it will always render the same size
If acceptable for this use case, you could have only a subset of datasets in the legend (for instance top5) and all others in another "others" legend item.
const pieGenerateLabelsLegendHandler = Chart.controllers.doughnut.overrides.plugins.legend.labels.generateLabels;
const pieLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
let others = [];
const chart = new Chart("myChart", {
type: 'pie',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
data: [65, 1, 80, 80, 10, 55, 15, 20, 40, 50, 8, 40],
backgroundColor: ['#3366cc','#dc3912','#ff9900','#109618','#990099','#0099c6','#dd4477','#66aa00','#b82e2e','#316395','#994499','#22aa99'],
}],
},
options: {
plugins: {
legend: {
labels: {
generateLabels(chart) {
const labels = pieGenerateLabelsLegendHandler(chart);
const sorted = labels.sort((a, b) => chart.data.datasets[0].data[a.index] <= chart.data.datasets[0].data[b.index]);
const top5 = sorted.filter((el, index) => index <= 5);
others = sorted.filter((el, index) => index > 5);
top5.push({text: 'Others', hidden: others[0].hidden});
return top5;
}
},
onClick(e, legendItem, legend) {
if (legendItem.text === 'Others'){
const ci = legend.chart;
others.forEach(function(item) {
ci.toggleDataVisibility(item.index);
});
ci.update();
return;
}
pieLegendClickHandler(e, legendItem, legend);
}
}
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I want to make something like this
here goes my sample code :-
plotOptions: {
series: {
borderWidth: 0,
pointWidth: 80,
groupPadding: 4,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%',
}
}
},
i am confused between pointWidh & groupPadding property, only one property woks at a time.
when give only pointWidth, width applies, and when groupPadding only, it also applies. but i want these property doesn't apply at the same time.
what am i doing wrong
here's the reproduce example
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-pointpadding-025/
I have written the complete working code, let me know if something is unclear.
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
pointPadding: 0,
borderRadius: 8,
pointWidth: 50
}
},
series: [{
data: [{y: 29.9, color: '#ff7841'}, {y: 71.5, color: '#ffa03c'}, {y: 106.4, color: '#ffbb39'}, {y: 129.2, color: '#b0bf05'}, {y:144.0, color: '#00bcb9'}, {y: 176.0, color: '#05a7cd'}, {y: 135.6, color: '#4d7ed7'}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
This fiddle seems very close to your design.
https://jsfiddle.net/sirajalam049/zxw0nLpr/7/
I am trying to show a chart with datetime x axis, i tried different formats for the date time field and none of them works(chart is not displayed) unless i send as year only for example:2019.
Below is the code i am using.
I appreciate any help on this please.
Regards
Nader
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/chart/css/shield-chart.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/chart/js/shield-chart.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
//Fill datasource
var industryPrices = [
{ x: '2009-11-09 00:00:00.000', y: 0.103 },
{ x: '2009-11-09 00:00:00.000', y: 0.105 },
{ x: '2009-11-09 00:00:00.000', y: 0.112 },
{ x: '2009-11-09 00:00:00.000', y: 0.111 }
];
//Initialize the shield chart
$("#chart").shieldChart({
theme: "light",
exportOptions: {
image: false,
print: false
},
primaryHeader: {
text: "Results chart"
},
chartLegend: {
align: 'right',
verticalAlign: 'top',
renderDirection: 'vertical'
},
seriesSettings: {
line: {
enablePointSelection: true,
pointMark: {
activeSettings: {
pointSelectedState: {
drawWidth: 4,
drawRadius: 4
}
}
}
}
},
axisX: {
axisType: 'datetime',
},
axisY: {
title: {
text: "Results"
}
},
//Set data source for chart
dataSeries: [{
seriesType: 'line',
collectionAlias: "Results",
data: industryPrices
}]
});
The graph in the view is not displayed:
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
test-controller.js:
(function () {
'use strict';
angular
.module('app.test')
.controller('TestController', TestController);
function TestController( $scope, $timeout) {
initialize();
function initialize() {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
// Simulate async data update
$timeout(function () {
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40]
];
}, 3000);
}
}
})();
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
</script>
I use the example
https://github.com/jtblin/angular-chart.js#example
I do not know why the graph is not displayed
You can use the same way, make sure that angular-charts and chart.js should have the correct versioned library references.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
DEMO
(function(angular) {
'use strict';
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.socialChart = {
options : {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
},
type: 'StackedBar',
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data : [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
]
}
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar" chart-labels="ctrl.socialChart.labels" chart-data="ctrl.socialChart.data" chart-series="ctrl.socialChart.series" chart-colors="ctrl.socialChart.colors" chart-options="ctrl.socialChart.options"></canvas>
</body>
</html>
I'm trying to create a column bar with animation, but it doesn't work for me. I have created a Plunker to demonstrate the problem.
What am I doing wrong?
Go to Plunker
Here you can see previously the code of my example:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var options = {
width: 600,
height: 400,
bar: { groupWidth: "95%" },
animation: {
//startup: true,
duration: 2500,
easing: 'out',
},
vAxis: { title: "Espectadores", minValue: 0, maxValue: 1000 },
hAxis: {title: "Pelicula"},
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addColumn('number', 'id');
data.addRow(['El Padrino', 1000, 100]);
data.addRow(['StarWars', 543, 100]);
data.addRow(['Superman', 789, 100]);
data.addRow(['Alien', 850, 100]);
data.addRow(['El Padrino', 1000, 100]);
data.addRow(['StarWars', 543, 100]);
data.addRow(['Superman', 789, 100]);
data.addRow(['Alien', 850, 100]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}]);
var chart = new google.visualization.ColumnChart(document.getElementById("test"));
chart.draw(view, options);
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id = "test"></div>
</body>
</html>
It's a problem with the 'current' version.
Version '43' appears to work.
google.charts.load('43', {'packages':['corechart']});
Check it out --> Go to Plunker