I'm trying to add extra padding to my chart (extra space at the right of the "orange" column):
But using chart 3.7.0 doesn't seem to work, any idea of how I can achieve this??
chart.options.scales:
scales: {
x: {
afterFit(axis) {
axis.paddingLeft = 50; //doesn't work
axis.paddingRight = 50; //doesn't work
},
},
},
Full Runnable example.
Chart.js docs state following
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
layout: {
padding: {
right: 50
}
}
}
});
Related
I need to show grid lines when my chart has no data. (For now, It shows a blank division when there is no data) How to show grid lines? Is it possible to do? I tried but couldn't find an useful answer. Following is the method I used to draw the chart.
public drawChart(): void {
this.options = new StockChart ({
rangeSelector: {
selected: 0,
inputEnabled: false,
},
chart: {
type: 'spline',
},
yAxis: {
labels: {
formatter: function(): string {
return this.value + '';
},
},
opposite: false,
},
plotOptions: {
series: {
showInNavigator: true,
},
},
series: [],
});
}
To show the gridlines yAxis needs to have defined some min and max values. When series is applied those values are calculated and set to the yAxis, but in the case of the empty data, we need to apply them as the dummy values. Later, when data will be applied we can reset those values by using the yAxis.update feature.
Demo: https://jsfiddle.net/BlackLabel/zcsp8nfr/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
can anyone tell me how can I remove the shadow behind the line chart as in the image below?
Image with the shadow
Thanks in advance :)
You can do it in two ways:
Setting the line configuration in global options.
var options = {
elements: {
line: {
tension: 0
}
}
};
Setting lineTension to 0 in datasets.
var chartData = {
labels: labels,
datasets: [{
label: "Chart Data",
lineTension: 0,
data: someData,
}]
};
I have a basic chart with a custom label, eg:
labels: {
items: [{
html: 'Testing Label',
style: {
left: '50px',
top: '50px'
}
}]
}
This works, but I'd like to position the label from the right side, I tried doing:
style: {
right: '50px',
top: '50px'
}
but this doesn't work...
JsFiddle link:
http://jsfiddle.net/0ze2u47h/3/
It seems that right property is not supported in chart.labels. For more complex configuration you can render the label using SVGRenderer:
chart: {
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var label = this.renderer.label('Test label', null, 100).add();
label.attr({
x: chart.plotWidth + chart.plotLeft - label.width
});
}
}
}
Live demo: http://jsfiddle.net/kkulig/aob1e197/
The advantage of rendering labels via renderer (not via constructor options) is that you can access parameters of the already created chart and label (chart.plotWidth, chart.plotLeft, label.width in this case).
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
I have the following plotly code:
var element = document.getElementById(scope.changeid);
function getData(division,redraw) {
var employeeData = [];
if (!division) {
$http.get(api.getUrl('competenceUserAverageByMyDivisions', null)).success(function (response) {
processData(response,redraw);
});
}
else {
$http.get(api.getUrl('competenceUserAverageByDivision', division)).success(function (response) {
processData(response,redraw);
})
}
}
function processData(data,redraw) {
var y = [],
x1 = [],
x2 = [];
data.forEach(function (item) {
y.push(item.user.profile.firstname);
x1.push(item.current_level);
x2.push(item.expected);
});
var charData = [{
x: y,
y: x1,
type: 'bar',
name: $filter('translate')('COMPETENCES.GRAPH.CURRENT'),
marker: {
color: '#23b7e5'
}
}, {
x:y,
y:x2,
type: 'bar',
marker: {
color: '#f05050'
},
name: $filter('translate')('COMPETENCES.GRAPH.EXPECTED')
}],
layout = {
title: $filter('translate')('USERMANAGEMENT.USERS'),
barmode: 'stack',
legend: {
traceorder: 'reversed'
}
};
Plotly.newPlot(element,charData,layout);
}
scope.$watch('divisionId', function (newValue, oldValue) {
if (newValue) {
getData(newValue.id,true);
}
}, true);
getData(null,false);
This generates the following chart:
<div class="panel-body">
<h4 class="text-center">{{'COMPETENCES.GRAPH_TITLES.OVERVIEW_GAP' | translate}}</h4>
<vertical-bar-chart id="chartArea" goto="competence.titleCompetenceDetails"
changeid="chartArea" xcolumn="xColumn" y-column="yColumn"
dataset="dataSet"
has-addition="true"
style="width: 80%; text-align: center"></vertical-bar-chart>
</div>
As you might be able to tell the text (x column) is being unintentionally cut off. So my question is how can i avoid this? i have attempted to increase the height of the element however without any luck :(
AS you can see here:
(oh you cant tell because of the white background but the height of panel body is 1000 px however it still cuts it off.)
Try increasing the bottom margin in layout.margin.b (more info in the plotlyjs reference page.
For reference, I had the same issue, margin bottom didn't help, but after the graph was created, I ran the following JQuery which revealed the hidden text:
var heightincrease = $('#yourID').find('.svg-container').height() + 100;
$('#yourID').find('.svg-container').height(heightincrease).find('.main-svg').height(heightincrease);
Obviously adjust as required to reveal your whole graph. Will probably break resizing so will need work if that's a concern.
I'm trying to make a bar chart using jqPlots. I'm taking data from database with ajax. In vertical it is shown prices-they are correct. But my problem is how to show dates in xaxis. Every bar should be placed in the correct place in horizontal depending on date.For example my current dates for the three bars are: 2015-06-06,2015-06-08, 2015-06-30.
If I use renderer: $.jqplot.CategoryAxisRenderer, dates in xaxis are shown correct but bars aren't positioned dependent on that date.
http://prntscr.com/7ew365
If I use renderer:$.jqplot.DateAxisRenderer, it looks in that way:
http://prntscr.com/7ew1ot
Dates aren't displayed. They should be:
var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];
But when I put: ticks: ticks2, my bars disappear.
My view is:
$(document).ready(function(){
var ticks2 = ['2015-05-31', '2015-06-06', '2015-06-13', '2015-06-20','2015-06-27','2015-07-03'];
var ticks = ['0.02', '0.04', '0.06', '0.08','0.1','0.12'];
$.ajax({
url: "<?= base_url() ?>index.php/receivedOrders/get_prices",
dataType:"json",
}).success(function(responseText) {
console.log(responseText)
$.jqplot.config.enablePlugins = true;
var plot2 = $.jqplot('column_chart', responseText, {
seriesDefaults:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 1,
barMargin: 15,
barDirection: 'vertical',
barWidth: 50
},
pointLabels: { show: true }
},
axes: {
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
// ticks: ticks2,
tickOptions: {
formatString:' %Y-%m-%d %H:%M'
//, min:'2015-06-06', max:'2015-06-30', tickInterval:'7 days'
},
},
yaxis: {
ticks: ticks,
tickOptions: {
formatString: '%.2f'
},
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
);
});