I'm using ChartJS to display some weather data. The problem I have is that the lines going right to the edge at the top and bottom look like they've been cut off.
I threw some example data together and uploaded it to this codepen: https://codepen.io/anon/pen/zELEWd
Is there some way to just add more space above the highest and the lowest point?
I read from this thread that there's the padding option, but that one affects the whole canvas and not the chart itself.
There are also some tips from this stockoverflow question, but I can't really put a suggestedMin and suggestedMax value in there, since I have more than one dataset in there that all have slightly different min and max values. (eg. for Pressure[hPa] I don't want to set suggestedMin to 0, since its values are all somewhere around 1200)
I think you've pretty much got it as is, just one configuration issue in the options object.
You currently have these options:
options: {
title: {
display: true,
text: 'Wetterdaten'
},
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
but what is missing, is that the yAxes array property has to be inside of a scales object. Like this:
options: {
title: {
display: true,
text: 'Wetterdaten'
},
scales: {
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
}
With this config in options your stepSize property will kick in and the top of the graph will be 20 when showing just the temperature data.
BUT
Now that the stepSize for the entire yAxis is 10, the pressure dataset goes way out of wack. So for this problem, you could implement two yAxes, where the pressure data is on the right yAxes and everything else is on the left yAxes:
var weatherCanvas = document.getElementById('weatherChart').getContext('2d');
var weatherChart = new Chart(weatherCanvas, {
type: 'line',
title: 'Wetter',
data: {
labels: ["01-01", "02-01", "03-01", "04-01", "05-01", "06-01", "07-01", "08-01", "09-01"],
datasets: [{
label: 'Temperature[°C]',
data: [14, 18, 18, 16, 14, 11, 11, 11, null],
borderColor: "rgb(252, 74, 74)",
yAxisID: 'left-y-axis'
}, {
label: 'Windspeed[km/h]',
data: [14, 18, 18, 16, 14, 11, 11, 11, null],
borderColor: "rgb(101, 219, 255)",
hidden: true,
yAxisID: 'left-y-axis'
}, {
label: 'Humidity[%]',
data: [84, 88, 88, 86, 74, 71, 71, 71, null],
borderColor: "rgb(101, 155, 255)",
hidden: true,
yAxisID: 'left-y-axis'
}, {
label: 'Pressure[hPa]',
data: [1193, 1211, 1211, 1200, 1999, 1997, 1995, 1993, null],
borderColor: "rgb(211, 211, 211)",
hidden: true,
yAxisID: 'right-y-axis'
}]
},
options: {
title: {
display: true,
text: 'Wetterdaten'
},
scales: {
yAxes: [{
id: 'left-y-axis',
position: 'left',
ticks: {
stepSize: 10
}
}, {
id: 'right-y-axis',
position: 'right',
ticks: {
stepSize: 100
}
}]
}
}
});
Here is a reference to Axes Configuration with a few examples as well.
I hope this helps.
A very recent fix is shown here.
You'd have to manually edit your Chart.js file src/controllers/controller.line.js
(For Angular 2, this file path will be located inside directory node_modules/chart.js/.)
Or just wait for the next Chart.js release which will most likely contain the fix.
An alternative workaround is described in comment 1 of this bug ticket: https://github.com/chartjs/Chart.js/issues/4202
Note that I posted the same comment to an identical question (though not for AngularJS):
https://stackoverflow.com/a/47306019/3061684
Related
I want to create a single bar using a bar chart. The setup is that the user can select different choices (representing the colors). In this example (codesandbox link below) I have a bar that has a max value of 90.000. The three chosen values are 20.000, 30.000 and 15.000, totaling 65.000.
Now, my goal is to have a border around this entire bar, not just the colors. In the image below this is represented with the red border. Currently I do this by putting a container element around my canvas element, but I would like to do this in the canvas itself, without using a container element. Someone has an idea on how to do this?
Codesandbox link
You need to define different dataset properties such as borderSkipped, borderRadius, borderWidth to achieve what you're looking for.
Don't know why but I also had to define the data of the dataset at the bottom as a floating bar in order to see the rounded border.
data: [[0, 20000]]
Please take a look at the runnable code below and see how it could work.
new Chart('chart', {
type: 'bar',
data: {
labels: [''],
datasets: [{
label: "currentAmount",
data: [[0, 20000]],
backgroundColor: "#bbb",
borderColor: "#f00",
borderWidth: 2,
borderSkipped: 'top',
borderRadius: 30,
barPercentage: 0.5
},
{
label: "amount 1",
data: [30000],
backgroundColor: "orange",
borderColor: "#f00",
borderWidth: { left: 2, right: 2 },
barPercentage: 0.5
},
{
label: "amount 2",
data: [15000],
backgroundColor: "green",
borderColor: "#f00",
borderWidth: { left: 2, right: 2 },
barPercentage: 0.5
},
{
label: "remaining",
data: [25000],
backgroundColor: "#fff",
borderColor: "#f00",
borderWidth: 2,
borderSkipped: 'bottom',
borderRadius: 30,
barPercentage: 0.5
},
]
},
options: {
plugins: {
legend: {
display: false
},
tooltip: {
displayColors: false
}
},
scales: {
y: {
display: false,
stacked: true,
beginsAtZero: true
},
x: {
display: false,
stacked: true
}
}
}
});
canvas {
max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart"></canvas>
I am creating a chart to render some data using chart js.
const data = {
labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
datasets: [
{
label: "Sales Made",
data: [3, 7, 4, 5],
borderColor: ["#03A9F5"],
},
],
};
const options = {
tension: 0.4,
title: {
display: true,
text: "linechrt",
},
scales: {
y: [
{
display: true,
stacked: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
min: 0,
max: 100,
},
},
],
},
};
now I've looked at online tutorials and even the documentation but I've not gotten a clear answer on how to paint the area below the line. ChartJs has a lot of versions and previous answers to this question especially here on Stack don't seem to work.
For other charts like bar the code
backGroundColor: ["red"]
on the datasets object works fine but if I try to do the same for a line chart it doesn't. The top
label icon that you click to hide or show the chart is the only one that seems to respond to the background color change. The area below the line doesn't. Please help.
<Line data={data} options={options} />
You need to set fill to true in your dataset. And depending on if you are using treeshaking you also will need to import and register filler from chart.js.
const data = {
labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
datasets: [
{
label: "Sales Made",
data: [3, 7, 4, 5],
borderColor: ["#03A9F5"],
fill: true,
backgroundColor: 'pink'
},
],
};
I'm trying to display live data given the past day, week, month, etc. Currently, the graph displays only a section of live data but I'd like for more to be shown. I'm using a barchart for now, and I'm aware of the live data having the same time logged, but I wanted to see if there is a way for more than 20 points to be shown on the chart. I added the code that I think I should edit. I've tried ticks and bounds but it's a little difficult for me to navigate exactly what I want on the chart.js site.
Edit: after some fixes to my database, I can see more data points displayed. However, when I choose "past month", I am supposed to have every recorded point from the past month. Would a scatter plot with a line through it be more reasonable to display?
Below is the application test image and code block:
Application test image
var myChart = document.getElementById("chart").getContext('2d');
gradient = myChart.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(29, 140, 248, 0.75)');
gradient.addColorStop(0.5, 'rgba(29, 140, 248, 0.5)');
gradient.addColorStop(1, 'rgba(29, 140, 248, 0)');
// Global Options
Chart.defaults.global.defaultFontFamily = 'inherit';
Chart.defaults.global.defaultFontSize = 18; //Effects x and y's number font size
Chart.defaults.global.defaultFontColor = '#777';
barchart = new Chart(myChart, {
type:'bar',
data: {
labels: {{ data.x_vals | tojson }},
datasets:[{
label:'Liquid Level',
data: { { data.y_vals } },
backgroundColor: gradient,
borderWidth:1, //Effects plotted line on chart
borderColor:'white',
hoverBorderWidth:1,
hoverBorderColor:'white',
barThickness:15
}]
},
options: {
legend: {
display:true,
position:'right',
labels: { fontColor:'#000' }
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMin: 0,
steps: 10,
stepValue: 10,
max: 100
}
}],
xAxes: [{
display: true,
ticks: {
autoSkip: true,
padding: 4,
fontSize: 12
}
}]
},
layout:{
padding:{
left:0,
right:0,
bottom:0,
top:0
}
}
}
});
I'm developing a report in Jaspersoft Studio 6.4 using custom visualization component and Highcharts.
Long story short, when doing a bubble chart or an area chart, plotOptions.fillColor -attribute does not work properly, but leaves the bubbles inside or stacked area chart's insides black. Black color usually means the color is not found, but the line of the bubble/lines in the area chart work as they should.
Here is the following Highcharts script for area chart:
define(['jquery_hc','hchart'], function ($, Highcharts) {
return function (instanceData) {
// Creating the chart
var config = {
chart: {
type: 'area',
plotBorderWidth: 1,
renderTo: instanceData.id,
width: instanceData.width,
height: instanceData.height,
marginBottom: 15,
marginLeft: 40,
marginRight: 5,
marginTop: 5
},
title: {
text: ""
},
colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'],
xAxis: {
allowDecimals: false,
title: {enabled: false},
labels: {enabled: false},
visible: false
},
legend: {
itemStyle: {"fontSize": 6},
symbolPadding: 4,
symbolHeight: 4,
symbolWidth: 4,
y: 20
},
credits: {enabled: false},
yAxis: {
title: {enabled: false},
labels: {
style: {"fontSize": 6},
formatter: function () {
return this.value;
},
},
tickInterval: 2
},
plotOptions: {
area: {
stacking: 'percent',
animation: false,
marker: {
enabled: false
},
lineWidth: 1
}
},
series: [{
name: 'that',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'it',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'with',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'who',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'how',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'this',
data: [82, 72, 62, 46, 113, 320, 443]
}, {
name: 'that',
data: [11, 12, 14, 16, 13, 55, 113]
}, {
name: 'those',
data: [7, 1, 3, 11, 15, 37, 49]
}, {
name: 'these',
data: [108, 301, 504, 1056, 3039, 8018, 10201]
}, {
name: 'this too',
data: [10, 30, 50, 105, 303, 801, 1020]
}]
}
new Highcharts.Chart(config);
}
});
And the build.js:
({
baseUrl: '',
paths: {
jquery_hc: "../jquery-3.2.1",
hchart: "../highcharts",
'areaChart': 'areaChart'
},
shim: {
'hchart' : {
deps: ["jquery_hc"],
exports: 'Highcharts'
}
},
name: 'areaChart',
out: "areaChart.min.js"
})
The highchart is using newest highchart.js and jquery-3.2.1.js.
Few things I've tried to add the color:
Using theme to put the charts main color
Setting plotOptions.fillColor: null
Setting plotOptions.fillColor: '#927453'
Setting plotOptions to "series" from "area"
Setting plotOptions.color: [the same colors]
and maybe few other things based on the API reference from Highcharts.
One thing on the other hand is working, if I put the plotOptions.fillColor: '#ffffff', the color of all changes, which means the issue is mostly about matching one color per dataset.
One huge issue is, that this is not reproducible in JSFiddle (JSFiddle).
So, Jasper Report is possibly to blame, but I'm starting to be out of ideas. I've found one issue, which could be related to this: (https://
community.jaspersoft.com/jaspersoft-studio/issues/8641) , but I haven't been able to do much about it with this setup. My web application is using jasper engine to produce reports and the problem is also present in there.
People of StackOverflow, employees of Highcharts and employees of Jaspersoft, combine your knowledge and help me to solve this issue!
Lastly, a picture of the Jasper Report studio of the generated report:
After looking to code, I found report is properly working when we see it in HTML format but pdf format is not working properly. As we kow CVC component utilises phantmjs in order to download report then I tried to search issue related to phantomjs and highcharts but unable to find anything.
Then I tried looked plotOption property and added following plotOption to your code.
plotOptions: {
series: {
animation: false,
stacking: 'percent',
lineWidth: 1,
fillColor: null,
fillOpacity: 1, // this is default to 0.75
marker: {
enabled: false
}
}
},
Then it starts showing the result in PDF format as well. So the main culprit is fillOpacity If you set it to 1 then your problem will be resolved.
Note: If you use fillOpacity other than 1 then it is not showing result.
You can also specify color, fillcolor and opacity as shown below.
series: [{
name: 'that',
data: [502, 635, 809, 947, 1402, 3634, 5268],
fillColor:'red', // use this color light as compared to color
fillOpacity: 1,
color: 'white' // use this color dark as compared to fillcolor
},
...
...
...
,{
name: 'this too',
data: [10, 30, 50, 105, 303, 801, 1020],
fillColor:'#00ff00',
fillOpacity: 1,
color: 'orange'
}]
You can download code from here.
There's too much padding on either side of the area chart and minPadding/maxPadding doesn't work with categories.
I want the area chart to start and end without any padding.
My code is below:
http://jsfiddle.net/nx4xeb4k/1/
$('#container').highcharts({
chart: {
type: 'area',
inverted: false
},
title: {
text: 'Too Much Padding On Either Side'
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Data Point'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y}</b> points'
},
series: [{
name: 'Visits',
data: [
["Monday", 58],
["Tuesday", 65],
["Wednesday", 55],
["Thursday", 44],
["Friday", 56],
["Saturday", 65],
["Sunday", 69]
],
dataLabels: {
enabled: false,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}',
y: 10,
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
A colleague of mine solved this very situation for some of my charts. Their solution was to remove the type: 'category' from the x-axis (making it a linear type instead) and instead replace the axis labels from an array.
Here's what's been changed:
First, I added an array of your x-axis labels.
var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday",
"Saturday","Sunday"];
Next, I updated your series values to hold only the y-axis values.
series: [{
name: 'Visits',
data: [58, 65, 55, 44, 56, 65, 69],
Then, for your x-axis, I included a formatter function to pull in the labels from the array as substitutes for the default linear values.
xAxis: {
labels: {
formatter: function(){
return categoryLabels[this.value];
}
}
},
Lastly, I updated the tooltip options to show the values from the labels array.
tooltip: {
formatter: function () {
return categoryLabels[this.x] + ': ' + Highcharts.numberFormat(this.y,0);
}
},
I updated your fiddle with this tweaks: http://jsfiddle.net/brightmatrix/nx4xeb4k/4/
I hope you'll find this solution as useful as I have!
According to API, the default value of highcharts.xAxis.tickmarkPlacement is between and this is why the point of each category drops between two ticks on xAxis in your chart.
By setting highcharts.xAxis.tickmarkPlacement to on and playing around the value of highcharts.xAxis.min and highcharts.xAxis.max like this, you should be able to achieve what you want.
You can declare the min / max values to fix the problem.
var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
//....
xAxis: {
min: 0.49,
max: categoryLabels.length - 1.49,
categories: categoryLabels,
type: 'category'
},
Example:
http://jsfiddle.net/fo04m7k7/