I am learning highchart with angularJs, first tick of x axis is not starting from 0 or we can say that left most corner of chart, here I attached screen shot of output which I am having now,
For this I refer this solution which worked but not working properly when only 2 values are there on x-axis it displayed 0.5 only on center on x axis, not showing actual value.
I am doing like this in my example,
xAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
align: "left",
lineColor: 'transparent'
}
Can anyone please guide me for the same.?
Add the following for the required functionality, it will start from leftmost point :
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
}
I think set Y-axis min value and X-axis min value.
xAxis: {
labels: {
enabled: true,
formatter: function () {
return this.value;
}
},
tickmarkPlacement: 'on',
gridLineWidth: 0,
min: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
align: "left",
lineColor: 'transparent'
},
yAxis: {
min: minYAxisValue,
max: maxYAxisValue
}
Hope so it may be helpful..
Related
I'm trying to hide yAxis labels. I tried display: false property, but that didn't work.
My code below:
export const options = {
responsive: true,
interaction: { includeInvisible: true, intersect: false },
tooltip: {
backgroundColor: "rgba(0, 0, 0, 0.3)",
displayColors: false,
multiKeyBackground: "rgba(0, 0, 0, 0)",
},
scale: {
y1: {
min: 0,
ticks: {
count: 5,
},
grid: { borderDash: [3], color: "rgb(126,126,126)", tickLength: 0 },
},
y2: {
display: false,
position: "right",
max: Math.max(...BTCPrices.map((el) => el.Volume)) * 10,
ticks: {
count: 5,
},
},
x: {
ticks: {},
},
},
plugins: {
legend: {
display: false,
},
},
};
here's the image describing the problem:
Thanks for helping!
This is because your config is not getting picked up, you putted your scale config in the options.scale namespace white it needs to be configured in the options.scales so you need to add an extra s at the end
This is how I manage to get rid of the labels, I think in your case instead of Y its gonna be y2
y: {
ticks: {
display: false, //this will remove only the label
},
},
I have a React HorizontalBar component being used like so:
<div>
<HorizontalBar data={myData} options={myOptions} height={80} />
</div>
The options supplied are:
{
title: {
display: true,
text: 'My Title',
},
tooltips: { enabled: false },
hover: { mode: null },
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 10,
top: 0,
bottom: 0,
},
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
position: 'top',
gridLines: {
display: false,
},
ticks: {
beginAtZero: false,
min: 0,
max: 100,
sampleSize: 2,
callback: function (value: number, index: any, values: any) {
if (value == 0 || value == 100) {
return value;
}
return '';
},
},
stacked: true,
},
],
yAxes: [{ stacked: true }],
},
};
Currently, this is what it looks like. I've added a background color on the canvas to show you what is going on:
Several things are wrong here that I would like some help on:
I cannot figure out why there is some mysterious padding on the left side of my canvas.
I would like to compress the distance between the gradient bar and the title but nothing I've tried in regards to adding padding options to the title attribute seem to work.
Finally, there is actually supposed to be a data label that is clipped because the size of the canvas. If I adjust the height attribute of the HorizontalBar to 140, it reveals:
Basically, what I want is that data label to be shown without everything so vertically stretched out (and without the y-axis line that has appeared in the second photo).
I want it to look something like this:
How do I achieve that?
Edit: I figured out the y-axis line display issue. I just have to add gridLines: { display: false } to my yAxes option and that removes it.
Title has its own padding, defaulting to 10.
yAxis can be hidden totally to remove the space (display: false).
tickMarkLength can be set to a negative number for xAxis grid lines to move those labels closer.
You should add padding to the bottom for the data label.
I have a component with barChart, but i have a socket that i receive new values for this barchart. If the value change from 19 to 200, i must do double click for reset zoom. There are any config for do that automatically?
my plotly config is:
layout: {
autosize: true,
xaxis: {
title: bottomText,
autorange: true
},
yaxis: {
title: leftText,
autorange: true
},
dragmode: 'zoom',
hovermode: 'closest',
margin: {
t:20,
b: 150
},
transition: {
duration: 500,
easing: 'cubic-in-out'
}
},
data: [{
x: details.index,
y: details.fw,
type: 'bar'
}],
config: {
displaylogo: false,
locale: 'es',
}
You can reset the zoom by assigning a new value to layout.uirevision when updating your chart. See https://plot.ly/javascript/uirevision/#reset-user-changes
I'm creating a line chart using Chart.js. The chart has two datasets. The x-axis is date, and y-axis is the value. When I hover the first data in dataset 1, the first data in dataset 2 is also active(zoom). That isn't I expected. Is there any way to active only the hovered data. And is there any way to active all data by their y value, not by index.
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
https://www.chartjs.org/docs/latest/general/interactions/modes.html
var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Dataset 1',
data: [{
x: '2019-01-15',
y: 100
}, {
x: '2019-02-03',
y: 300
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 1
}, {
label: 'Dataset 2',
data: [{
x: '2019-01-03',
y: 150
}, {
x: '2019-01-15',
y: 200
}, {
x: '2019-02-06',
y: 250
}],
backgroundColor: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 255, 255, 1)',
borderWidth: 1
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
type: 'time',
position: 'bottom',
time: {
min: "2019-1-1",
max: "2019-2-28",
unit: "month",
displayFormats: {
"month": "YYYY-MM",
}
}
}]
}
}
});
https://jsfiddle.net/t1gmrujo/2/
I've tried edit the tooltips mode but the result is not I expected. It shows the tooltips in difference dataset with same index.
The tooltip configuration controls display of the tooltip popup, not the dataset points. Points are controlled by the hover configuration. This is mentioned on the page you linked (emphasis mine):
When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
If you only want the single point you are hovering over to be highlighted, use:
options: {
hover: {
mode: 'point'
}
}
If you want the whole dataset highlighted when hovering any single dataset point, use:
options: {
hover: {
mode: 'dataset'
}
}
If you want to highlight the dataset and see all dataset values in the tooltip, use:
options: {
hover: {
mode: 'dataset'
},
tooltips: {
mode: 'dataset'
}
}
I'm using official Highcharts with React on a page to display different measurements. Everything works fine except for IE11 (go figure), which upon a specific scenario crashes the browser.
On the page the user is able to see measurements for daily, weekly, monthly etc. Each of these tabs then renders Highcharts with data for chosen time.
It works fine even in IE11 until user checks tab Monthly and to view the graph in hourly view (standard view for Monthly is a daily chart bar).
When Monthly -> Hourly view, the call responds with an object with about 700 arrays were the data is picked.
I did a test where I stripped the response for that specific scenario so that it showed only 50 entries = still a bit slow but didn't freeze on me.
I've been looking into this since it pretty much matches my issue as well but no luck:
https://github.com/highcharts/highcharts/issues/7725
Also, been trying to figure out how to provide a fiddle for this but the project is quite large which makes it difficult to pick bits and pieces.
So this is basically just a shout out to see if anyone has any other ideas. This works flawlessly in Chrome, Firefox etc.
I think it could be somewhat related to the amount of categories that are being set, just as the Github issue above says. But also, I've tried but no luck (or I did it wrong).
I'll provide the set of options that I have for Highcharts:
const options = {
chart: {
marginTop: 40,
animation: false,
},
title: {
text: ''
},
legend: {
enabled: this.state.resolutionType !== 'allyears',
reversed: true,
floating: true,
padding: 0,
x: 50,
align: 'left',
verticalAlign: 'top',
itemDistance: 5,
symbolRadius: 0,
symbolPadding: 2,
},
series: [{
type: this.state.graphType,
showInLegend: false,
data: this.state.newData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: this.state.graphType,
name: 'Historical',
visible: this.state.activeHistoricalData || this.state.activePreviousData,
showInLegend: false,
data: this.state.historicalData,
tooltip: {
valueSuffix: ' :-'
}
},
{
type: 'spline',
name: this.props.latestConsumptionContent('shortTemperature'),
visible: this.state.activeTemperature,
showInLegend: false,
showEmpty: false,
data: this.state.newTemp,
yAxis: 1,
tooltip: {
valueSuffix: ' .'
}
}],
plotOptions: {
series: {
maxPointWidth: 40,
connectNulls: true,
events: {
click: event => this.handleChartPointClick(event.point.time)
},
},
column: {
marker: {
enabled: false
}
},
line: {
marker: {
enabled: false
}
},
area: {
fillOpacity: 0.3,
marker: {
enabled: true,
symbol: 'circle'
}
}
},
xAxis: {
categories,
tickInterval: getTickInterval(this.state.resolutionType, this.state.periodTime),
reversedStacks: true,
autoRotation: false
}
},
yAxis: [{
min: 0,
title: {
text: ':-',
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
labels: {
format: getLabelFormat(this.state.resolutionType, this.state.periodTime),
}
},
{
title: {
text: this.props.latestConsumptionContent('shortTemperature'),
align: 'high',
offset: 0,
rotation: 0,
y: -20,
},
showEmpty: false,
reversed: this.state.reverseTemperatureAxis,
opposite: true
}],
credits: false
};