Related
Draw a basic line chart using Chart.js version 2.8.0.
Observe the rightmost data point is cut off. But the leftmost data point (the first data point) looks intact.
I’ve changed the size of the data point circles by changing values of pointRadius. But even in the smallest value, the data point still gets cut off.
I’m not using any plugin or fancy settings. I am filling the chart are with light gray background colour. But other than that, everything else is a box standard Chart.js.
I’ve recreated the issue here:
https://codepen.io/LeoU/pen/gVLybO
And here is my options settings.
options: {
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return "£" + parseInt(tooltipValue).toLocaleString();
}
}
},
scales: {
yAxes: [{
gridLines: {
color: "white",
lineWidth: 2
},
ticks: {
beginAtZero: true,
min: 0,
stepSize: 500000,
callback: function(value, index, values) {
return "£" + value.toLocaleString();
},
},
scaleLabel: {
display: true,
labelString: "Median house price"
}
}],
xAxes: [{
display: false,
ticks: {
display: false
}
}]
}
},
Has anyone seen a similar problem with Chart.js?
You can use offset
scales: {
xAxes: [{
offset: true
}]
}
I fixed this by adding padding value to the right hand side of the chart.
I played around with the exact number and 4 looked about right for my chart. But I’d imagine the right number will depend on the size of your pointRadius and other variables you have.
This is what it looks like for me with the changes.
options: {
layout: {
padding: {
left: 0,
right: 4,
top: 0,
bottom: 0
}
}
}
For more about padding for Chart.js, this is their instruction page.
https://www.chartjs.org/docs/latest/configuration/layout.html
It is annoying. And, this should be a default setting, really. But this fixed the problem for me.
I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>
in my "overview" simple-line-chart, I do not want to display yaxes.
The following code does not help:
yaxes: { show: false, ticks: [] }
It probably works for yaxis, but not for yaxes.
I guess I need to hide each axis, but how do I do it?
The yaxes property needs an array of objects (one for each axis). So, use
yaxis: { show: false, ... }
for one axis and
yaxes: [ { show: false, ... }, { show: false, ... }, ... ]
for multiple axes.
I'm trying to specifically target the first and last x-axis labels, which are text elements, and alter their attributes.
To preface this issue, I was trying to keep the first and last x-axis labels within the confines of the Highcharts container. Unfortunately, they are cutting off in the UI.
This is my configuration:
xAxis: [{
type: 'datetime',
showFirstLabel: true,
showLastLabel: true,
labels: {
step: 3,
formatter: function(){
return options.labels[this.value];
},
style: {
fontSize: '10px',
color: '#9c9c9c'
},
// x: 5,
y: 10
},
startOnTick: true,
// lineColor: 'transparent',
tickLength: 0,
minPadding: 0,
maxPadding: 0
}],
The step key is causing this I realize. Otherwise, I would be able to use overflow:justify, but I wanted the step. So, I then decided that perhaps altering the SVG would be a good solution. It worked when the chart is first loaded, but it does not work when being redrawn.
This was my solution on 'load', which I'd like to replicate on 'redraw':
Highcharts.Chart.prototype.callbacks.push(function(chart){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
});
You should configure these callbacks in the options of your chart. It's cleaner that way:
function moveLabels(){
$('.highcharts-axis-labels.highcharts-xaxis-labels text').first().attr('x', 25);
$('.highcharts-axis-labels.highcharts-xaxis-labels text').last().attr('x', 813);
}
$('#container').highcharts({
chart: {
events: {
load: moveLabels
redraw: moveLabels
}
}
},
...
I have a basic bar chart I'm presenting in flot (5 bars, displaying the % per status).
$.plot($("#placeholder"), [
{
label: 'Failed',
data: [[0,10]],
bars: { show: true }
},
{
label: 'Passed',
data: [[1,15]],
bars: { show: true }
},
{
label: 'Not Run',
data: [[2,30]],
bars: { show: true }
},
{
label: 'Blocked',
data: [[3,5]],
bars: { show: true }
},
{
label: 'In Progress',
data: [[4,40]],
bars: { show: true }
}
],
{
xaxis: {
ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
},
legend: {
show: false
}
});
I'm finding the font used for the tick values on the x axis are a little too big, especially when the graph is displayed at small dimensions ie. 240x100. I've read the API documentation, but can't find how to control the tick label sizes.
Is this possible OOTB?
It doesn't appear you can set the font size via the API, but you can use css to set the size of the tick labels.
.tickLabel { font-size: 80% }
Here's an example directly from the API:
xaxis:{
font:{
size:11,
style:"italic",
weight:"bold",
family:"sans-serif",
variant:"small-caps"
}
}
http://flot.googlecode.com/svn/trunk/API.txt
The above two answers won't work on the latest version of flot, as they no longer use 'real' text (the text is drawn instead). Instead specify these options:
{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}
(replace some_number with the desired size in points)
I used the following:
CSS File/SCSS File
#graph_label .tickLabel{
font-size: 50%;
}
Index.html or place where you are plotting the graph area
$.plot($("graph_label"), [dataArrayReference], options);
Ref: #BrentM 's Answer Above
PS: I am using Flot Version prior to 0.8.1 so I dont have any idea about how latest version would work