I have the following stacked bar chart with the sample data. I want that per year (label) the individual stacked bars are sorted by the value. E.g. for 2019 the bar should be (form top to bottom) red (50), blue (20) and black (10).
https://jsfiddle.net/7rna08dm/2/
How can I achieve this? Is there the possibility to do this with the datasets property? Or is there any bar sorting property?
Currenctly I'm using the following data structure and didn't find a solution to achieve the expected behaviour with sorting the data:
data: {
labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
datasets: [
{
label: 'Max',
data: [0, 0, 50, 10, 0, 70],
backgroundColor: 'red',
},
{
label: 'Peter',
data: [10, 0, 20, 30, 0, 0],
backgroundColor: 'blue',
},
{
label: 'Dave',
data: [0, 0, 10, 20, 0, 30],
backgroundColor: 'black',
},
],
},
I have a Rails 6 app in which I am using Highcharts. I'm using plain JavaScript at the moment, then I'll transition to the highchart gem when I have the chart exactly how I want it. I have the chart almost exactly how I want it to render except for two things:
How can I use two different colors for a scatter chart?
How can I have just two lines bisecting my chart?
My data, at the moment is just a hard-coded array of arrays, something like this: [[3, 5], [7, 3], [22, 10], [35, 35], [10, 5], [10, 7]]. I would like to split the array in two and use two different colors for the points on the scatter chart.
For the lines, I would only like to show a line on the 'y' axis at point 50 (my y axis goes from 0 to 100) and one line on the 'x' axis at point 100 (my x axis goes from 0 to 200). Currently, I have both the lines on point 0.
Split your data into two series and set individual color for them.
Set gridLineWidth to 0 for both axes and add the lines by plotLines.
chart: {
type: 'scatter',
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 0,
plotLines: [{
value: 50
}]
},
xAxis: {
min: 0,
max: 200,
gridLineWidth: 0,
plotLines: [{
value: 100
}]
},
series: [{
color: 'red',
data: [
[3, 5],
[7, 3],
[22, 10]
]
}, {
color: 'blue',
data: [
[35, 35],
[10, 5],
[10, 7]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/vm9Lrgds/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines
I am trying to display a series of data for a specific set of Dates, say for 15 or 30 Days. Now, I don't want to display all these dates on x-axis instead, because that will be too many and it will be difficult to understand, instead want to plot it on intervals so that y-axis data can fit correctly.
Below is how I was displaying everything which is looking clumsy and difficult to read
"xAxis": {
categories: [
'10 June',
'12 June',
'14 June',
'16 June',
'18 June',
'20 June',
'22 June'
]
},
"series": [
{
name: 'Total Students',
data: [1, 2, 1, 4, 3, 60]
}
]
Is there a way to make the x-axis populate dynamically to display a large range of dates? Kindly suggest.
You can use 'datetime' axis type and set x and y data in this way:
xAxis: {
type: 'datetime'
},
series: [{
name: 'Total Students',
data: [
[Date.UTC(2013, 8, 16), 0.7500],
[Date.UTC(2013, 8, 17), 0.7486],
[Date.UTC(2013, 8, 18), 0.7396],
[Date.UTC(2013, 8, 19), 0.7391],
[Date.UTC(2013, 8, 20), 0.7394],
]
}]
Live demo: http://jsfiddle.net/BlackLabel/xq52vagL/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
I am using ECharts to show the trend data in line chart. I have 50 series to show in the line chart. Every series has a legend to show. I want to show the legends on top of the chart. But, I want to show the legends in maximum 3 lines. And if legends doesn't fit in the 3 lines then I want to show the vertical scroll. But, I am not able to show the vertical scroll with maximum of 3 lines of legends. Every line should show more than one legend in it.
I tried with vertical and horizontal scroll. In vertical scroll, it shows only one legend in one line. this is the problem. Actually, ECharts should show the what ever possible legends in one line. If there is enough space to have 2 legends in one line, it should show 2 legends in one line. It should show 3 lines and if all legends doesn't fit in three lines, then should add vertical scroll. But, currently legends overlap to chart.
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: [{
left: 'left',width:'50%',
type:'scroll',
orient:'vertical',
height:'100',
selectedMode:'multiple',
//pageButtonPosition:'end',
//formatter:'legend {name} ',
data: ['saaaaaaaaaaaaaaa0', 'saaaaaaaaaaaaaaa1','saaaaaaaaaaaaaaa2','saaaaaaaaaaaaaaa3'
,'saaaaaaaaaaaaaaa4','saaaaaaaaaaaaaaa8'
, 'saaaaaaaaaaaaaaa9','saaaaaaaaaa10','saaaaaaaaaa13','saaaaaaaaaa14','saaaaaaaaaa11'
, 'saaaaaaaaaa12','saaaaaaaaaa15','saaaaaaaaaa16'
,'saaaaaaaaaa17'],
},
{
left: 'right',width:'50%',height:'auto',
data: ['saaaaaaaaaaaaaaa5','saaaaaaaaaaaaaaa6','saaaaaaaaaaaaaaa7'],
}
],
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
},
grid: {
height:'auto'
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: 'saaaaaaaaaaaaaaa0',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa1',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa2',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa3',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa4',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa5',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa6',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa7',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa8',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa9',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa10',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa11',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaa12',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa13',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa14',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa15',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
}
]
};
I'm pretty sure that you are trying to do something that is not supported by ECharts yet.
Programmatically speaking:
You cannot get how many items are fit in one single line.
For the reason above, you can't know how many lines you have in the legend block.
There is no max-line or max-items-per-line control yet.
I guess the best you can do is to make 3 legend blocks that you place vertically with legend.left and legend.top pixel configurations, and put parts of your whole legend data into those blocks. The first legend.data would contain the first 3 items of your base array, the second legend.data would contain the 3 next ones... And control the contents externally by adding/removing items from each legend.data.
This is clearly not a good solution anyway. The scroll would look buggy.
I suggest you to post a clear example and use case of your idea on their official feature request form, this is the best way for you to get this functionality without coding a huge and unscalable workaround.
Hi guys I have a highcharts graph that is a stacked bar and I am trying to give my chart the effect that it is being filled, almost like a thermometer. Currently when the chart draws the red and gray bars push everything to the right. Is there a way that I can set the gray bar so that it shows right away on page load, and then the red bar fills into the gray bar? Thanks
http://jsfiddle.net/jimbob25/L974T/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderRadius: 5,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderRadius: 5
}]
Update, I would like it to look like the first bar in the following link
http://jsfiddle.net/L974T/3/
You can see that the first bar is grey, i can make the rest gray and it would be fine, but the bars would not scale based off of resolution
Here is what you can do:
add one more series, with different stack (as background) - animation for that series should be disabled (duplicated of gray one)
change color for right-hand series to transparent
And here is working code: http://jsfiddle.net/L974T/4/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderWidth: 0,
borderRadius: 5
}]