Here is an Echarts column chart:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: [120],
type: 'bar'
},
{
data: [100],
type: 'bar'
}
]
};
It will display a column chart with two bars, one for each series. ECharts will render it as such:
What I really want is for Mon to be a label for the red bar in the first data series, and Tue to be a label for the blue bar in the second data series. In other words, I want the x label for each item in each series to display, as it would if it were a single series:
This second chart is the way I want it to display except I want the Tue bar to display in blue as it would if it were in another series.
In my real-life scenario, I expect there would be only one item per series, so if the solution has something to do with the name of the series as opposed to names/label of the individual items, that would work for me.
Any guidance would be appreciated.
There are at least two ways you can accomplish this.
Use two bar series and barGap:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: ['-', 120],
type: 'bar',
barGap: '-100%'
},
{
data: [100, '-'],
type: 'bar'
}
]
};
ref: https://echarts.apache.org/en/option.html#series-bar.barGap
Use a single bar series with a customized data item:
option = {
xAxis: {
type: 'category',
data: ['Mon','Tue']
},
yAxis: {
type: 'value'
},
series: [{
data: [
120,
{
value: 100,
itemStyle: {
color: '#324b5b'
}
}
],
type: 'bar'
}
]
};
ref: https://echarts.apache.org/en/option.html#series-bar.data
Either of the above approaches should yield a chart that looks like this:
two vertical bars with different colours
Related
I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.
Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];
You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result
I am creating a column chart with Highcharts and I want to stack the values by time. So the xAxis is of type datetime. This is my config (omitting the less important configuration options):
var chartOptions = {
title: {
text: null
},
chart: {
type: 'column',
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
series: [
{
name: "test",
type: 'column',
data: [[1432400400000, 2], [1432486800000, 5], [1432573200000, 7]]
},
{
name: "test_1",
type: 'column',
data: [[1432400400000, 2], [1432486800000, 5], [1432573201000, 9]]
}
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
}
}
If the date sent is identical then the stacking is working right but if there is a second of difference, then it's not stacking well, like the third column in the following image:
It's a bit weird because it's showing the numbers. Is there any option for increasing the stacking range to minimum one second or something like that?
Fiddle: Code
I'm new using Highcharts and I have a chart with 7 series. Those series shows prices and now I need to show in the main chart tooltip the percentage difference between the prices of the main chart and just another one.
I was watching how to format the tooltip but I can't find how to solve this, maybe is easy or maybe not, so your help will be so appreciated.
Here you can see an example of my code:
series: [{
name: "User Price",
type:'line',
data: JSON.parse(data)
},
{
type: 'line',
name: 'Average Price',
color: "#E82315",
dataLabels: false,
visible: true,
data: JSON.parse(precio_medio)
},
{
type: 'line',
name: 'Other Price',
color: "#CC8604",
visible: false,
dataLabels: false,
data: [0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,
0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884]
},
{
type: 'line',
name: 'Other Price 2',
color: "#F29D00",
visible: false,
dataLabels: false,
data: [0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368
,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368]
}]
And I want to show in the tooltip the percentage difference between the User Price and the Average price.
Thanks you all in advance.
Try This
formatter:function() {
var pointPct='';
var baseValue= this.points[0].point.y;
var tooTipTxt='';
console.log(baseValue);
$.each(this.points, function(i, point) {
pointPct = (point.y)*100/baseValue;
tooTipTxt += "<span>"+pointPct+"</span> "
});
return tooTipTxt;
}
I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
This is the code I'm using, I add the series in a dynamic way.
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
enabled: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Score',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
});
// Add Series
var detailchart = $('#chart-detail').highcharts();
var categories = new Array;
// Set Chart Title
detailchart.setTitle({text: results[0].category});
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score]
});
});
detailchart.xAxis[0].setCategories(["1", "2"]);
$('#chart-detail').highcharts().reflow();
Results is an array that looks like this (I get it through ajax):
As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score, 40], //40 is some data for your second category.
});
});
Demo: http://jsfiddle.net/u6crkatv/
Only what you need is use 4 series, each of them with single data point.
series: [{
name: 'Year 1800',
data: [107]
}, {
name: 'Year 1900',
data: [138]
}, {
name: 'Year 2008',
data: [973]
},{
name: 'Year 20098',
data: [973]
}]
Example: http://jsfiddle.net/y9wzggc4/
This is something about the ExtJs5 charts.I have trouble changing the bar chart's labels.
Codes is as below:
Ext.create('Ext.chart.CartesianChart', {
store: {
fields: ['pet', 'households', 'total'],
data: [{
pet: {name:'Cats'},
households: 38,
total: 93
}]
},
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'pet',
yField: 'households',
label:{
field:'pet',
renderer:function(pet){
return 'Dear '+pet.name;
}
}
}]
});
You must have noticed that the field 'pet' is an object instead of a string.
The renderer in the series label returns the value I want it to be,but the label is still [object Object]!
Labels under the category(x axis in your code) are rendered by 'category' not the series.Try code below:
{
type: 'category',
position: 'bottom',
renderer:function(label){
return label.name;//the var 'label' represents the pet object.
}
}
By the way,I found another problem. No matter how many models are there in the chart store,only the first bar is displayed!