How can I remove the duplicates from x axis labels in heatmap apexcharts
Here the JSFiddle Link
click here
Here multiple May months are showing I need to display only one in the Middle of 4 columns.
I tried the below
xaxis: {
labels: {showDuplicates: false}
}
But this is not working as expected.
We need to add the x axis like below and change the x axis value to a date
xaxis: {
type: "datetime",
labels: {
format: 'MMM',
showDuplicates: false}
}
JSFiddle
Related
Example of Stacked Y-Axes
I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.
When I keep the scales object simple like this:
scales: {
y: {
stacked: true,
title: {
display: true,
text: "Temperature (°C)",
}
},
x: {
type: "time",
time: {
tooltipFormat: "LTS",
unit: "hour",
},
title: {
display: true,
text: "Datetime",
},
}
},
I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)
Additive Y-Axis example
It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!
With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.
How to fix the number of gridlines in X-Axis as label are too condensed.
Example: https://www.chartjs.org/samples/latest/charts/line/basic.html
If we add 60+ Data labels are too condensed, then after some more values axis lines adjust to hide some value in between to show label properly.
Is there a way to control trigger point which adjusts the axis line number ?
Assuming you defined xAxes.time.unit: 'month', you can define time.stepSize as follows.
xAxes: [{
type: 'time',
time: {
unit: 'month',
stepSize: 2
},
time.stepSize: the number of units between grid lines.
Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
I am working with a Multi Axis line chart by ApexCharts.js.
What I want to do
I have multiple y axes and some series share the same y axis. Since there is no y axis ID, you have to create a y axis for every series matching the index of the series. That's why the last y axis is not shown - but its tooltip is still shown (as seen in the following picture).
I want to hide the tooltip for that y axis since the y axis itself is also hidden.
I tried to set the tooltip.enabled property for each y axis but that didn't seem to work for individual y axes:
yaxis: [{
seriesName: 'TEAM A',
showAlways: true,
title: {
text: 'A-Axis'
},
tooltip: {
enabled: true
}}]
https://codepen.io/niklhs/pen/OJyyzoa
Then I tried to set the tooltip.enabledOnSeries property:
https://codepen.io/niklhs/pen/yLYBeJb
That didn't work either unfortunately.
Any ideas?
For anyone running into the same issue:
This is now possible with ApexCharts 3.19.0.
Just update the ApexCharts dependency and you‘re good to go with the following solution:
tooltip: {
enabled: false
}
Full code example:
https://codepen.io/niklhs/pen/PoPWvWz
Charts.js does not render all data points when using Point[] format.
Codepen example
Questions:
Why only two out of four data points are rendered for each dataset?
Why there are no ticks on X axis?
Why is "undefined" string shown on point hover?
How can I get both X and Y values display on point hover?
Thank you!
Adding "scales" option fixed the problem:
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
}
By default, Google Chart positioned horizontal axis ticks on the border line of Chart Area, which can be shown in this picture:
How can I set some kind of padding to chart area that will make it look like this:
I am using Google Charts https://google-developers.appspot.com/chart/.
I finally found the answer:
Since I am using Date Data Type format, the chart will act as Continuous Chart (https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Data_Format).
Continuous Chart has characteristics of having tick close to the edge of the chart. What I have to do is set the domainAxis.type option to 'category'. https://google-developers.appspot.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
Here is the code of my chart using ChartKick (http://ankane.github.io/chartkick/):
<%= line_chart #daily_pageviews, library: { domainAxis: { type: "category" }, curveType: "none", height: "400px", colors: ["#ff9933"], chartArea: { backgroundColor: { stroke: "#ccc", strokeWidth: 1 } } } %>
Result: