Fiddle: https://jsfiddle.net/rjkmu0rn/
When I add a ChartCursor to my chart, it displays the value of the points on the legend and, as a result, overlaps on the legend itself.
Any ideas on how to prevent ChartCursor from displaying the values on the legend?
You can set the valueText to be an empty string.
legend: {
useGraphSettings: true,
valueText: ""
}
Fixed it by adding a valueFunction to the legend settings: https://jsfiddle.net/rjkmu0rn/2/
legend: {
"horizontalGap": 50,
"useGraphSettings": true,
"valueFunction": function(graphDataItem, valueText) {
return "";
}
}
Related
I am facing a rather troublesome problem with chart as follows:
I want to remove the outermost border and keep the inner lines, but the chart doesn't allow me to do that. I tried using 'drawBorder: false', but it still doesn't work. Is there any way to handle this?
How to remove the value of the origin x-Axis and Y-Axis?
please refer to the image
How to edit the value of A-Xis? I want it to increase by 1000 each time on the X-Axis.
image
Setting the scales option like this:
scales: {
y: {
grid: {
drawBorder: false, // <-- this removes y-axis line
lineWidth: function (context) {
return context?.index === 0 ? 0 : 1; // <-- this removes the base line
}
}
},
x: {
grid: {
drawBorder: false,
lineWidth: 0 // <-- this removes vertical lines between bars
}
}
}
should achieve the desired look. Check out this code sandbox with an example.
You can find more information about styling the chart here.
I used area range Highcharts but facing certain issues as:
For X-axis, the chart doesn't start with an initial point rather shows incorrect start tick value(i.e. 2020) instead of 2019.
Need to show label values for last data point only for each series, attached image below for reference
Could someone please help me with what do I do to resolve my issues.
Thanks in advance!
For the 1st issue, I tried changing the 'pointStart' attribute value for plotOptions->series but didn't work.
"plotOptions": {
"series": {
"pointStart": 1546300800000
}
}
Here is JSFiddle link of the chart containing code:
The first issue can be resolved by setting xAxsi.tickInterval = plotOptions.series.pointInterval:
xAxis: {
type: "datetime",
tickInterval: 31536000000
...
}
The second issue can be resolved by providing labels formatter callback function that will return only the last series point value. Also, other dataLabels properties have to be set properly (like align, overflow, etc). Check demo and code posted below.
Code:
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'middle',
padding: 8,
allowOverlap: true,
overflow: 'allow',
crop: false,
formatter: function() {
var point = this.point,
series = this.series;
if (series.data.length === point.index + 1) {
return '$' + this.y.toFixed(1);
} else {
return '';
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/2xLevj6y/
API reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#formatter
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#align
https://api.highcharts.com/class-reference/Highcharts.DataLabelsOptionsObject#overflow
I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using:
legend: {
display: true,
labels: {
usePointStyle: true,
},
}
I want to change the size of the circles. But according to the documentation this is only possible if I also change the font size:
Label style will match corresponding point style (size is based on fontSize, boxWidth is not used in this case).
- https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
Does anyone know if there is another option to change the size? Or do I have to use generateLabels().
Here is a codePen to take a look on that.
You can use the boxWidth option to influence the size of the point in the legend:
options: {
legend: {
labels: {
usePointStyle: true,
boxWidth: 6
}
}
}
read the documentation of chartjs about legend
I am using JQplot Pie Chart. I need the labels to appear outside the chart. How can I make that possible?
If you mean data labels then you need to set the dataLabelPositionFactor to appropriate value greater than 1.0 and you are done.
Example sample available here.
To do that yuo need to specify the placement propertie :
legend: {
show:true; placement: "outsideGrid"
}
Example :
$.jqplot('YOUR_DIV_ID', [['LABEL_1',2],['LABEL_2',232],['LABEL_3',22], {
seriesDefaults: {
// Make this a pie chart.
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
// Put data labels on the pie slices.
// By default, labels show the percentage of the slice.
showDataLabels: true
}
},
//Make legend visibile, outside the chart
legend: {
show:true, placement: "outsideGrid"
}
}
);
How can I remove the labels and keep the Y axis?
I don't want remove the axis, only the labels. Basically the y axis without text or numbers
chart1.addAxis("y", {
labels: false,
vertical : true,
leftBottom : true,
});
can you try like this:
addAxis("y", {
vertical: true,
fixLower: "major",
fixUpper: "major",
labelFunc:function(){
return " ";
}
});
Pls. Dont remove the one single space inside the quotes.
or here is a post which shows how to delete an axis from the chart.
Hiding x Axis in dojox.charting