How to show the last tick label of xAxis?
Screenshot: chart image
Use the following configuration option:
xAxis: {
axisLabel: { showMaxLabel: true },
...
}
Related
I need to show grid lines when my chart has no data. (For now, It shows a blank division when there is no data) How to show grid lines? Is it possible to do? I tried but couldn't find an useful answer. Following is the method I used to draw the chart.
public drawChart(): void {
this.options = new StockChart ({
rangeSelector: {
selected: 0,
inputEnabled: false,
},
chart: {
type: 'spline',
},
yAxis: {
labels: {
formatter: function(): string {
return this.value + '';
},
},
opposite: false,
},
plotOptions: {
series: {
showInNavigator: true,
},
},
series: [],
});
}
To show the gridlines yAxis needs to have defined some min and max values. When series is applied those values are calculated and set to the yAxis, but in the case of the empty data, we need to apply them as the dummy values. Later, when data will be applied we can reset those values by using the yAxis.update feature.
Demo: https://jsfiddle.net/BlackLabel/zcsp8nfr/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#update
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I am using ApexCharts to show some stats. I wanted to hide the x-axis tooltip which is marked in red in the image
options = {
xaxis: {
tooltip: {
enabled: false
}
}
}
https://apexcharts.com/docs/options/xaxis/#tooltip
In another way, you can hide Xaxis using:
xaxis: {
labels: {
show: false
}
}
I don't think the above actually answer the OPs question. Based on their image and question they just wanted to remove the x-axis value at the bottom. You can do that by using CSS as follows:
.apexcharts-xaxistooltip-bottom {
display: none;
}
events: {
click: function (event) {
this.lineWidth=5;
}
}
This is Highcharts series click event function. I set this series width 5 in here. It works when I do click on series but as I removed my mouse from series. Series width goes back to normal. I want this width to be stable what I set in click event. Until I don't change i.t
I think that you can use Series.update() method in case of your chart. Here you can find information about this method:
http://api.highcharts.com/highstock#Series.update
$(function() {
$('#container').highcharts({
plotOptions: {
series: {
events: {
click: function(event) {
this.update({
lineWidth: 5
})
}
}
}
},
series: [{
name: 'ADBE',
data: [1, 2, 3, 4]
}]
});
});
And here you can find simple example how it can work:
http://jsfiddle.net/5u6anyzb/3/
Best regards.
Can any one suggest me the way of adding title to the C3.js line and bar charts ? I have got the following sample but it is for gauge chart. For any c3 chart is there any option to set the chart title?
donut: {
title: 'Title'
}
This was a top google result, so I thought I'd add that this is now part of the library:
title: {
text: 'My Title'
}
More info # https://github.com/masayuki0812/c3/pull/1025
You'd need to fall back to using D3 to add a chart title. Something like:
d3.select("svg").append("text")
.attr("x", 100 )
.attr("y", 50)
.style("text-anchor", "middle")
.text("Your chart title goes here");
I am using this code for my chart.
Code:
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursday', 50],
['Friday', 100]
],
type: 'donut'
},
donut: {
title: "usage "
}
});
Result :
also couldn't find a way and ended up writing the title as the unit and editing the label.
gauge: {
label: {
format: function(value, ratio) {
return "%"+value;
},
show: true // to turn off the min/max labels.
},
min: 0,
max: 100,
units: "Overall Profit"
// width: 39 // for adjusting arc thickness
},
I need to create a pie chart with labels indicating what each area means, but also another info overimposed over each area. If I use both data labels and a legend, they'll show the same text. How can I have both with different texts, or emulate that effect?
A mock of what I'd like to get:
Using the format or formatter config properties of the dataLabels, you can make them say whatever you want.
pie: {
dataLabels: {
enabled: true,
formatter: function(){
return 'Y Value: ' + this.y; // y value
}
},
showInLegend: true
}
Quick example.