I want to pan and zoom on a line chart with chartjs-plugin-zoom. The problem is that when I use pan it also zoom on chart till just one label remains, there is no problem when chart model is bar. how can I solve this problem? I want pan just to pan not zoom.
this is a fiddle that works for bar chart but not works correctly for line chart:
https://jsfiddle.net/pfd2on55/
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 5, 9, 4, 11]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
}
});
I solved this problem by editing function panIndexScale of file Chart.Zoom.js. I changed
var offsetAmt = Math.max((scale.ticks.length - ((scale.options.gridLines.offsetGridLines) ? 0 : 1)), 1); to
var offsetAmt = Math.max((scale.ticks.length - 0), 1);
now pan and zoom work correctly.
Related
echarts: bar chart bars are located left and right of the value on the category axis:
How to tell echarts to start the bar with the value on the category axis? Like this:
To clarify the problem, here ist another example. This is a chart of the hourly sum of precipitation. Every bar should show the sum from the bottom to the top of the hour, the data values are conencted to every bottom of the hour.
as you can see, the bars are not starting at 8:00, they are starting at 7:30.
Data: (timestamps are shown in CET)
series: [
{
name: "Niederschlag",
type: "bar",
data: [[1608534000000, 3], [1608537600000, 5], [1608541200000, 2], [1608544800000, 0], [1608548400000, 1] ],
barWidth: '100%'
}
]
It should look like this:
Start point of bar here doesn't matter, you need align labels to left: https://echarts.apache.org/en/option.html#series-bar.label.align
you need a hidden xAxis like below:
option = {
xAxis: [{
type: 'category',
data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
show: false
}, {
type: 'category',
data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
boundaryGap: false,
axisTick: { alignWithLabel: true },
position: 'bottom'
}],
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130,120,210,110,210],
type: 'bar',
barCategoryGap:'20%',
itemStyle: {
},
xAxisIndex: 0,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
You have not provided the complete chart config, so I recommend using this one. Also pay attention on method useUTC and you need to know that "By default, echarts uses local timezone to formate time labels"
So I see this state of Chart by you data with offset -180:
var myChart = echarts.init(document.getElementById('chart'));
var chartData = [
[1608534000000, 3],
[1608537600000, 5],
[1608541200000, 2],
[1608544800000, 0],
[1608548400000, 1],
];
var option = {
tooltip: {},
xAxis: {
type: 'time',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
splitNumber: 24,
},
yAxis: {
type: 'value'
},
series: [{
name: "Niederschlag",
type: "bar",
data: chartData,
barWidth: '100%',
}],
useUTC: false,
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 1024px;height:400px;"></div>
I have a combined BarLineChart. Is there a possibility to add a label near the line (in this case how much the sales increased from 2015 to 2016) ?
I hope there is some way
This is what i have so far
I want this
Thanks
The easiest way to do this is to use the chartjs-plugin-annotation plugin provided by the same team that provides chart.js.
You can use the plugin to draw arbitrary lines or boxes on your chart that can also contain a label. Unfortunately, the plugin does not yet support point annotations, so you have to use a little hack to enable the label to display but not the line or box.
Here is an example chart that uses the plugin to draw a horizontal white line at a specific Y value (white is used so that it blends in with the chart background and becomes invisible). The line is configured to also have a label. The end result is a text annotation on the chart with no visible line.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan 21st', 'Feb 21st'],
datasets: [{
type: 'line',
label: 'B',
data: [10, 25],
fill: false,
borderWidth: 3,
borderColor: chartColors.orange,
lineTension: 0,
}, {
type: 'bar',
label: 'A',
backgroundColor: chartColors.blue,
data: [10, 25],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
min: 'Jan 21st',
max: 'Apr 21st',
}
}],
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 18,
borderColor: 'white',
borderWidth: 0,
label: {
xAdjust: -50,
fontSize: 16,
fontColor: 'black',
backgroundColor: 'white',
content: "+20%",
enabled: true
}
}],
drawTime: 'beforeDatasetsDraw'
}
}
});
You can see it in action at this codepen.
One final note, if you include the plugin in your app and you also use charts that don't use scales (e.g. pie/doughnut) then you will get an error. This is a known issue and has been logged here.
The workaround is to add this to your pie/doughnut chart config (or it might be easier to add it to the pie/doughnut global default config).
scales:{
yAxes: [],
xAxes: []
},
I am trying to build graph.
My y-axis start with 0 here, I dont know how to configure it and why it is talking 0 - I see other post which mentioned scaleOverride:true, scaleStartValue:0.1, scaleStepWidth:5 - I dont know how to use that in my below code , how can configure y-axis in chart.js.
Any pointer would be
I have following code
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(220,220,220,0.5)",
data: [6, 6, 6, 8, 6, 9, 8]
}]
};
function barChart() {
var context = document.getElementById('stacked').getContext('2d');
var myBar = new Chart(context, {
type: 'bar',
data: barChartData,
options: {
title:{
display:true,
text:"Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
$(document).ready(function() {
$(document).ready(barChart);
});
Thank you guys for helping, I observed that chart.js will automatically take value for y-axis based on your data, you can change y/x-axis setting under Options > Scales , I also needed to change step size of y-axis and get rid of x-axis grid line,"ticks" is something I was looking for, here is my sample code and steps to achieved all these.
Step 1) Canvas this is place holder where your chart will display on JSP
<canvas width="1393px;" height="500px;" id="stacked"></canvas>
Step 2) Create sample datasets (this is JSON you need to create based on your requirement but make sure you provide exact the same formated JSON response as given below along with your data.
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "red",
data: [9, 6, 6, 8, 6, 9, 8]
},
{
label: 'Dataset 1',
backgroundColor: "rgba(225,226,228,0.5)",
data: [9, 6, 6, 8, 6, 9, 8]
}]
};
or you can call JSON from controller inside script as below
var jsonArry = <%=request.getAttribute("jsonArry")%>;
Step 3) call that JSON which you have created at step 2
function barChart(){
var context = document.getElementById('stacked').getContext('2d');
var myBar = new Chart(context, {
type: 'bar',
data: jsonArry,
options: {
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
ticks:{
stepSize : 10,
},
stacked: true,
gridLines: {
lineWidth: 0,
color: "rgba(255,255,255,0)"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 1,
}
}]
}
}
});
};
Hope this will help , for reference I have used following documentation Chart JS
Thanks.
Just remove the stacked option and it will stop starting from 0 (unless your data starts from 0).
Related fiddle - http://jsfiddle.net/rsyk9he0/
For stacked charts, Chart.js builds a list of positive and negative sums for each stack (bar) and then uses that to figure out the scale min and max values. If there are no negative values, the list of negative sums is a list of 0s. This forces the scale min to be 0.
scaleStartValue, scaleStepWidth, etc. are options from v1.x of Chart.js. You are using v2.x. See How to make integer scale in Chartjs for the 2.x equivalents.
I've got a working combination chart. Line + columns.
The line is at the bottom of the chart because the numbers are low (between 5 - 10%). The columns' numbers are around 80% so they're up to the top of the chart. This is normal behavior.
I know in Excel you can shift or offset this line to the top of the chart so that it sits on top of the columns... Is this possible with Highcharts? How do you do this offset in Highcharts? I looked everywhere in the docs but can't find a solution...
thanks in advance,
Bart
You can use second yAxis, so you will be able to set extremes, which will work as your offset, see: http://jsfiddle.net/3bQne/921/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012', '01/03/2012', '01/04/2012', '01/05/2012', '01/06/2012', '01/07/2012']
},
yAxis: [{
// default options
}, {
opposite: true,
min: 0,
max: 5
}],
series: [{
type: 'column',
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}, {
type: 'line',
data: [4, 4, 4, 4, 4, 4],
yAxis: 1
}]
});
I am trying to build an Area Graph using Highcharts library. All of a sudden i see that there is some spacing on the x-axis before my actual data starts. I want to start the graph right from [0,0] axis with appropriate data.
<?php
$data1 = array(3300, 3000, 4300, 4200, 2900, 1900, 1800);
?>
<script type="text/javascript">$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'areachart',
type: 'area'
},
title: {
text: 'People'
},
credits: {
enabled: false
},
xAxis: {
startOnTick: false,
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
title: {
text: null
},
labels: {
formatter: function() {
return this.value;
}
}
},
plotOptions: {
area:{
dataLabels: {
enabled: true
}
}
},
series: [{
data: [<?php foreach($data1 as $da):
echo $da.', ';
endforeach;
?>
]
}]
});
});
</script>
Good news, it is possible... with some caveats.
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min:0.5,
max:10.5,
tickInterval:1,
maxPadding:0,
endOnTick:false,
startOnTick:false
}
http://jsfiddle.net/eg9jn/
Here are the important bits:
The min and max are set to be 0.5 "inside" the chart.
start/endOnTick are set to false.
One caveat: This doesn't work when there are only two categories...
This is not possible since you are using categories for the xAxis. Labels and points for categories are always set in the middle of the category. The first and last category therefore have the gap you want to get rid of.
But in this case, it's not a bug, it's a feature.
You could try and modify your xAxis to use a normal axis and use a custom label formatter to display the days instead of numbers.