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
}]
});
Related
When I have a chart over several months, the interval is set to include the first of the month making intervals uneven and causing labels to overlap. Is this the expected behavior? Is there a way to disable this?
example
Here is an example based off one of echarts examples.
option = {
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
data: [
['2019-08-17', 200],
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-11-15', 100]
]
}
]
};
If you want even intervals, you can instruct echarts to treat the dates as discrete values by changing the configuration of the axis:
xAxis: {
type: 'category',
}
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'm trying to use Highcharts to create a graph similar to what's shown below. As clear, the 1st column (100%) is a sum of all others. The approach I thought of was to have invisible series below each of the individual categories to give them their raised look. The only thing that's holding me back is the thought of the situation where I might have to deal with say 30+ categories (possible in our application). Is there any simpler way to achieve the same results?
I can't post the image directly as I'm a new user. Sorry.
http://i.stack.imgur.com/RBWIf.png
I would suggest taking a look at the "low" property which is shown here:
http://fiddle.jshell.net/8JP8T/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
series: [{
data: [{
low: 1,
y: 2
}, {
low: 2,
y: 4
}, {
low: 0,
y: 4
}, {
low: 4,
y: 5
}]
}]
});
You'll still have to preprocess your data to get the correct y value and low value, but it seems doable?
For column chart, for each point you can specify the y value and the corresponding low to create a floating column.
series: [{
data: [
{y: 29.9, low: 20},
{y: 50, low: 20},
{y: 100, low: 50}
]
}]
See this example on jsfiddle.