I am using Chartkick chartjs to display A chart in my js.erb file. When the data is empty it's showing 0.5 and 1 as steps. I am trying to pass options to y axis, but nothing works except the colors and libraries. I just want to get rid of these numbers from y axis when there's no data.
Here is my code:
<%option = chart_options(centres_patient_chart_path,
column_chart(#users.group_by_month(:created_at,format:("%B %Y")).count,
id: 'patients',
colors: ['rgb(237, 108,104)'],
options: {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 10
}
}
]
},
},
library: {
animation: {easing: 'easeOutQuad'},
legend: { position: "left", labels: { fontSize: 26 } }
}),
{data:#users,type:'patient'})%>
Related
I want to show tooltip on mouse hover of every coordinate in angular-highchart, it should show x and y axis value in tooltip or label.
how we can show the tooltip on every coordinate of high chart.
It can be add scatter series and enabled markers, to imitate showing tooltip when axiss are crossing. Additionally, I added wrapp and extend to get a possibility to chart coordinate inside tooltip.formatter callback function.
(function(H) {
H.Tooltip.prototype.getAnchor = function(points, mouseEvent) {
var ret,
chart = this.chart,
inverted = chart.inverted,
plotTop = chart.plotTop,
plotLeft = chart.plotLeft,
plotX = 0,
plotY = 0,
yAxis,
xAxis;
points = H.splat(points);
// Pie uses a special tooltipPos
ret = points[0].tooltipPos;
// When tooltip follows mouse, relate the position to the mouse
if (this.followPointer && mouseEvent) {
if (mouseEvent.chartX === undefined) {
mouseEvent = chart.pointer.normalize(mouseEvent);
}
ret = [
mouseEvent.chartX - chart.plotLeft,
mouseEvent.chartY - plotTop
];
}
// When shared, use the average position
if (!ret) {
H.each(points, function(point) {
yAxis = point.series.yAxis;
xAxis = point.series.xAxis;
plotX += point.plotX + (!inverted && xAxis ? xAxis.left - plotLeft : 0);
plotY += (point.plotLow ? (point.plotLow + point.plotHigh) / 2 : point.plotY) +
(!inverted && yAxis ? yAxis.top - plotTop : 0); // #1151
});
plotX /= points.length;
plotY /= points.length;
ret = [
inverted ? chart.plotWidth - plotY : plotX,
this.shared && !inverted && points.length > 1 && mouseEvent ?
mouseEvent.chartY - plotTop : // place shared tooltip next to the mouse (#424)
inverted ? chart.plotHeight - plotX : plotY
];
}
// Add your event to Tooltip instances
this.event = mouseEvent;
return H.map(ret, Math.round);
}
})(Highcharts)
Highcharts.chart('container', {
title: {
text: 'Logarithmic axis demo'
},
xAxis: {
tickInterval: 0.1,
gridLineWidth: 1,
type: 'logarithmic',
accessibility: {
rangeDescription: 'Range: 1 to 10'
}
},
yAxis: [{
type: 'logarithmic',
minorTickInterval: 0.1,
accessibility: {
rangeDescription: 'Range: 0.1 to 1000'
}
}],
tooltip: {
followTouchMove: true,
followPointer: true,
formatter: function(mouseEvent) {
let event = mouseEvent.event
return `chartX:${event.chartX} <br> chartY:${event.chartY}`;
}
},
series: [{
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
pointStart: 1
},
{
type: 'scatter',
data: [{
x: 1,
y: 10
}, {
x: 2,
y: 10
}, {
x: 5,
y: 10
}, {
x: 4,
y: 10
}, {
x: 8,
y: 10
}],
}
],
plotOptions: {
scatter: {
states: {
inactive: {
enabled: false
}
},
marker: {
enabled: false
},
enableMouseTracking: true,
showInLegend: false
},
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>
Demo: https://jsfiddle.net/BlackLabel/t05uqfvm/
As shown in screenshot I need my crosshair to move across the points but the tooltip value is snap to next value even the crosshair is not reached that point.I am facing an issue in highcharts. I want when I hover around the chart then crosshair should reflect the value of current point which is being hovered. As shown in code currently its changing values in mid way which is not reflecting right value as respect to crosshair.
Highcharts.chart('container', {
tooltip: {
snap: -1,
crosshairs: true
},
xAxis:{
crosshair: {
interpolate: true,
color: 'gray',
snap: false
},
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
},
series: [{
marker: {
states: {
hover: {
enabled: false
}
}
},
step:'left',
data: [0, 1, 0, 1, 0, 1, 0]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
It's because you set the xAxis.crosschair.snap equal to false. Actually, you can remove the snap: false definition, because it's set to true by default. Then it should behave just like you want.
[EDIT]
If you would like to show current crosschairs xAxis value, it's not implemented in Highcharts, but Highstock has its own xAxis.crosschair.label property which serves the feature you need. Here is the example and documentation:
http://jsfiddle.net/hzcuf68y/
https://api.highcharts.com/highstock/xAxis.crosshair.label
If you don't want to change the Highcharts for Highstock, you can refer to this demo, where the crosschairs and labels are rendered manually: http://jsfiddle.net/mr1c03ae/
Live example: https://jsfiddle.net/n7bawfcg/
API Reference: https://api.highcharts.com/highcharts/xAxis.crosshair.snap
After alot of research I got the solution just posting here if someone may face the same problem. http://jsfiddle.net/F4e2Y/70/
function interpolate(data) {
var resolution = 0.1,
interpolatedData = [];
data.forEach(function(point, i) {
var x;
if (i > 0) {
for (x = data[i - 1].x + resolution; x < point.x; x += resolution) {
interpolatedData.push({
x: Highcharts.correctFloat(x),
y: Highcharts.correctFloat(data[i - 1].y),
});
}
}
interpolatedData.push(point)
});
return interpolatedData;
}
var data = [{
x: 0,
y: 1
}, {
x: 2,
y: 0
}, {
x: 4,
y: 1
}, {
x: 6,
y: 1
}, {
x: 8,
y: 0
}, {
x: 10,
y: 1
}];
Highcharts.chart('container', {
chart:{
zoomType: 'x',
},
tooltip: {
shared: true
},
xAxis: {
crosshair: true
},
series: [{
step:'left',
data: interpolate(data),
}]
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
I been playing with Chartjs to generate something like highcharts but couldn't bring it close. The application is finished and it seems a waste to buy highcharts, migrate from chartjs for this single chart.
Is there a way Chartjs can output something like that? I did try creating two horizontal bar charts side-by-side in separate canvas; while i saw the output; the behavior is not what I want.
You could use a horizontal stacked barchart with two datasets. Add negative values to the dataset on the left (male) but display the absolute value in the callbacks of the xAxis and the tooltip.
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
labels: ["20-30", "10-20", "0-10"],
datasets: [{
label: "Male",
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
borderWidth: 2,
data: [-65, -59, -20],
}, {
label: "Female",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
data: [72, 45, 18],
},
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
ticks: {
callback: function(value, index, values) {
return Math.abs(value);
}
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItems, data) {
return data.datasets[tooltipItems.datasetIndex].label + ": " + Math.abs(tooltipItems.xLabel);
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I have a stacked group column graph as shown in the fiddle provided below. In the xAxis labels (red blocks), I would like to display the total of the stacked amounts subtracted from the total of the second column. For example, for "Value1" I want to display 42 in the label (100-(43+15)). Right now, I am only able to access x values, which I am returning in the formatter function (this.value). https://jsfiddle.net/er1187/n6sr0znx/
xAxis: [{
offset: -280,
tickWidth: 0,
lineWidth: 0,
categories: ['Value1', 'Value2', 'Value3'],
labels: {
x: 5,
useHTML: true,
style:{
backgroundColor: 'red',
color: 'white'
},
formatter: function () {
return this.value;
}
}
}, {
linkedTo: 0,
categories: ['Value1', 'Value2', 'Value3']
}]
In the axis formatter you dont have access to the processed data yet. However, you can access the options of series and obtain the raw data.
formatter: function () {
const axis = this.axis;
const points = axis.series.map(series =>
series.options.data[axis.categories.indexOf(this.value)]
);
return points[2] - (points[0] + points[1]);
}
example: https://jsfiddle.net/n6sr0znx/2/
I am rendering a bar chart in my code but since I have too many x axis data points, the tooltip doesnt show. Can anyone help here?
My code is:
plot = $.jqplot(chartID, [xAndyVals],
{
title: tempKey,
seriesDefaults: {
pointLabels: { show: true },
},
series: [{ renderer: $.jqplot.BarRenderer }],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt',
}
},
axes: {
xaxis: {
ticks: xTicks,
},
yaxis: {
min: 0,
max: yMaxVal,
}
},
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor: tooltipContentEditor
},
cursor: {
show: false,
showTooltip: true
},
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
var plotData = plot.data[seriesIndex][pointIndex];
var tooltip = mapping.get(plotData[0]);
return tooltip + ", " + plotData[1];
}
Sample xAndyVals is [0, 152518], where 0 is the x axis value and 152158 is the y axis value.