I have a 250px wide column chart, it looks great when there are 10+ items in the series, but when there's only 2-3, the bars are drawn really wide, which looks somewhat odd.
_____
| |
| |
-----|-----
I can set the width in the series config:
{
style: { width: 25 }
}
This works, but the thinner bars are still left-aligned with their previous position, so they don't match up with the axis tick and label.
Like so:
_
| |
| |
-----|-----
I don't want to change the axis spacing, I want to end up with widely-spaced, 25px bars (that are correctly centered on the axis tick):
_
| |
| |
-----|-----
Any ideas?
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Math.max(attr.x, attr.x + (attr.width - 50) / 2)
});
}
Maybe a bit to late but this is my solution
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, {
fill: color,
width: 50,
x: Ext.getCmp('chart_id').axes.items[1].inflections[value][0] - 25
});
}
In this example I read the x axe and find any given point (label stripes) than I looped though my bars, you can use a count or something and use in instead of value. Hope it works!
//try like below
series:[
{...
style:{
minBarWidth:5,
maxBarWidth:5
}
},
{...}
]
I think the problem is that the chart you are looking for is Cartesian one and the column chart doesn't work for you because it hasn't any exact X value.
So, I simulate the Cartesian chart (like Line chart) to look like the column chart like this:
It's a trick somehow but it works fine for me.
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['min-X','max-X']
}, {
type: 'Numeric',
position: 'left',
fields: ['min-Y','max-Y']
}],
series: [{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line1-X',
yField: 'line1-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line2-X',
yField: 'line2-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line3-X',
yField: 'line3-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
},{
type: 'line',
axis: ['bottom', 'left'],
xField: 'line4-X',
yField: 'line4-Y',
showMarkers: false,
style: {
stroke: '#ccc',
'stroke-width': 10
}
}]
And the data:
{
line1-X: 2, line1-Y: 0,
line2-X: 5, line2-Y: 0,
line3-X: 5.5, line3-Y: 0,
line4-X: 8, line4-Y: 0,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
},{
line1-X: 2, line1-Y: 40,
line2-X: 5, line2-Y: 80,
line3-X: 5.5, line3-Y: 60,
line4-X: 8, line4-Y: 100,
min-X: 0, min-Y: 0,
max-X: 10, max-Y: 100
}
But in this approach you have to know the maximum number of Columns(Lines) you have. And each time insert Zero(0) data to one you don't want to show. If you don't know the number of Columns(Lines) you have to create them dynamically.
This is my idea and it works the way I want it. Maybe it helps you to find your solution.
try using the "gutter" property to set the gap between the column.
Related
how to separate hoverlabel property of x and y? How to make x hoverlabel stick to bottom in plotly javascript as like on the picture?
Actually i done this, but hoverlabel has coupled x and y value.
var data = [
{
type: 'scatter',
x: [],
y: [],type: 'scatter',
line: {
width: 2,
color: '#D2AB67'
}
}
];
var layout = {
plot_bgcolor: '#F7F8FA',
paper_bgcolor: '#F7F8FA',
showlegend: false,
yaxis: {
title: 'Kurs złota PLN/1oz',
showgrid: false,
linecolor: 'black',
linewidth: 1,
mirror: true
},
xaxis: {
showgrid: false,
linecolor: 'black',
linewidth: 1,
mirror: true
}
};
Plotly.newPlot('myDiv', data, layout, {displayModeBar: false});
I was searching documentation, but but i didn't find a solution.
You need to set the hovermode accordingly in the layout settings.
hovermode - ( "x" | "y" | "closest" | false | "x unified" | "y unified" ). Default: "closest".
Determines the mode of hover interactions. If "closest", a single
hoverlabel will appear for the "closest" point within the
hoverdistance. If "x" (or "y"), multiple hoverlabels will appear for
multiple points at the "closest" x- (or y-) coordinate within the
hoverdistance [...].
const layout : {
hovermode: 'x',
// ...
};
I would like to set my area range (the blue horizontal bar) only on the red bar (fidding the width of the red bar) but I cannot find a solution to do this. Plot band don't work because it's full width on x axis. Could you help me please ?
On this try I managed to set the area range (blue horizontal bar) but it created another entry on X axis ("1"), I want to keep only the first entry "Omburu" with the same disposition of yellow, orange and red bar. With additionnal horizontal blue bar on the red bar who is set between to values following "Puissance kW" scale.
The JSFiddle is here : https://jsfiddle.net/poloh11/1qzfgopy/11/
Thanks a lot
{
name: 'Range',
data: [
[1000, 1500],[1000, 1500]
],
type: 'arearange',
lineWidth: 0,
color: Highcharts.getOptions().colors[0],
fillOpacity: 0.3,
marker: {
enabled: false
},
yAxis: 1
}
Use columnrage series instead. It has common properties with column series (pointRange, pointPadding etc.) that allow to adjust it similarly. The following configuration works for me:
{
name: 'Range',
data: [
[1000, 1500]
],
type: 'columnrange',
lineWidth: 0,
color: 'rgba(149,206,255,0.7)',
marker: {
enabled: false
},
yAxis: 1,
pointPlacement: 0.3,
pointRange: 0.33,
borderWidth: 0
}
Live demo: https://jsfiddle.net/BlackLabel/9czvmhsx/
API reference: https://jsfiddle.net/BlackLabel/9czvmhsx/
I need to remain the functionality of extensible scroll bar, but I don't need overview navigator. Like :
I need the scroll bar(area 1) to still remains extensible, but remove the navigator(area 2).
This is a design of what I want:
demo you could quickly modify from :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar can not be resized like Navigator, so I think what you really want to use is (2) Navigator and disable (1) Scrollbar. Here is simple example do to do: http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
If the navigator should have background, you can add two dummy points for the series, one at the beginning of the original series and one on the end:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
Then just set color and fillOpacity for a series, to the color you want to achieve, and set yAxis.max below your dummy value (2 in my case). Working demo: http://jsfiddle.net/dJbZT/184/
I am implementing the area chart as shown in the mock up, but have strict at some portion and not able to get option s that are available in http://api.highcharts.com/highcharts for configuring the chart to look as is.
Here is the mock up look.
What I have achieved so far is :
Fiddle Demo
So I could not able to achieve the
1.background color
backgroundColor: {
linearGradient: false,
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
2 . Only outer border line. (As shown in the mock up)
3 . On Hover Show All 3 labels. (As shown in the mock up)
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
Last Point to implement :
Well..
1.background color:
chart: {
backgroundColor: 'black', //for whole plot
name: 'IMPS',
data: [
...
], color: 'rgb(213, 156, 72)' //for one area
2 . Only outer border line. (As shown in the mock up)
yAxis: [{
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
}, {
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0,
linkedTo: 0,
opposite: true
}],
3 . On Hover Show All 3 labels. (As shown in the mock up)
tooltip: {
pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up
shared: true, //all series
crosshairs: true //vertical line
},
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
so I already answered how do it in this question
Last Point to implement :
js:
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
and now you can customize your tooltip like you want:
.highcharts-tooltip>span p {
margin: 0;
}
.highcharts-tooltip>span span{
display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}
Highchart's API don't allows you to set current values on axis, but you can disable default labels and put handmade labels with position absolute like I already doing with legend.
Summary FIDDLE
Using dojox.charting to create a column chart. The x-axis labels are dates, and only one label seems to print if the number of series is 10 or more, even though dropLabels: false is being used.
When I tweak the loop to stop at 9 iterations, it prints all the labels just fine. As soon as it hits 10 items, only one label will print. I even tried shortening the label length in case that did something, but the same thing happened.
Anyone know why this would happen? Is it a bug or are we just doing something wrong?
Edit:
I discovered something interesting. It's not just that only one label prints if you're at 10 or more iterations. Only the 10th label prints.
Here's how the chart object is being instantiated. If more detail would be helpful, I can provide it.
chart = new dojox.charting.Chart2D("lineChartDiv");
chart.addPlot("default", { type: "ClusteredColumns", label: true, labelStyle: "outside", labeloffset: 5, gap: 15, minBarSize: 15, maxBarSize: 15, enableCache: true });
chart.addPlot("other2", { type: "Columns", gap: 30, minBarSize: 50, maxBarSize: 50, stroke: { color: "rgba(0,0,0,.3)" }, fill: "rgba(0,0,0,0)", enableCache: true });
chart.addPlot("other3", { type: "Columns", gap: 30, minBarSize: 50, maxBarSize: 50, stroke: { color: "rgba(0,0,0,1)" }, fill: "rgba(0,0,0,0)", enableCache: true });
chart.addPlot("other", { type: "Grid", hMajorLines: true, hMinorLines: false, vMajorLines: false, vMinorLines: false, majorHLine: { color: "rgba(0,0,0,.3)", width: 1 }, renderOnAxis: false, enableCache: true });
console.log('labels', labels);
chart.addAxis("x", { labels: labels, stroke: "#a6a6a6", majorTicks: true, minorTicks: false, minorLabels: false, dropLabels: false });
chart.addAxis("y", { vertical: true, stroke: "#a6a6a6", majorTickStep: EachTickStep, minorTicks: false });
chart.addSeries("Actual Burnup Past", actualBurnupPast, { stroke: { color: "#00b7e2" }, fill: "#00b7e2" });
chart.addSeries("Planned Burnup", plannedBurnup, { stroke: { color: "#a6a6a6" }, fill: "#a6a6a6" });
chart.addSeries("Hardening", hardening, { plot: "other2" });
chart.addSeries("Regression", regression, { plot: "other3" });
chart.render();
Apparently, the issue was related to the property majorTickStep. If it's not defined, it seems to be defaulting to 10 if there are 10 or more series being displayed. When I explicitly set the value, then the labels print as expected.
majorTickStep: 1