Marion's fiddle, which perfectly shows multiple distinct points for multiple series.
Following this, I'm trying to implement the same in my fiddle.
I have 2 Name fields PaidDataAxis and DeniedDataAxis
I'm returning series based on this only:
customizeSeries: function(seriesName) {
if (seriesName === 'PaidDataAxis') {
return {
axis: 'paid'
}
} else {
return {
axis: 'denied'
}
}
}
MarkerType which is a tagField is not required.
Both the series along with their points are getting rendered. However, I see that the points are overlapping.
How to avoid series points overlapping in dxChart in this case?
There's something stupid I'm doing, but unable to figure out where.
The solution in such case is to apply min on valueAxis and/or argumentAxis
valueType: 'numeric', //for staying safer
min: 0,
Without which, dxChart will try to automatically calculate axes' scale
Related
I am using chart-js v 3.6 together with ng2-charts in an Angular 12 Project.
The chart is a simple line chart but with multiple y axes. I was trying to implement the same kind of callback function as in this question or as shown in the official documents:
How to change the Y-axis values from numbers to strings in Chart.js?
https://www.chartjs.org/docs/3.2.1/axes/labelling.html#creating-custom-tick-formats
the final chartOptions look like this:
options: {
scales: {
x: {
offset: true
},
y1: {
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
}
}
}
}
It seems to work if you are not using multiple y axis with just 'y' however with 'y1' as key it does not do anything. The callback function is showing in the final chart object however no changes in template.
If somebody has a hint where I can find a way to implement or a working sample, which does include multiple y axis this would be great.
As I am working on that chart on a different environment, I cannot access or copy the code freely, so I cannot show the current way of implementation.
Currently I am working on having different followPointer behavior for different types of series in my Highchart implementation. For example, line charts in my project usually are closely bundled data points, so having followPointer set to true would not be great in terms of differentiating between closely packed data points, so for line series in a chart that ALSO contain a column/bar series, I'd like Highcharts to automatically switch to followPointer: false when it detects that the cursor is on a line chart.
I tried implementing it in the tooltip.formatter as demonstrated in this Fiddle example.
tooltip: {
followPointer: true,
formatter: function() {
if(this.series.type == 'line') {
this.series.tooltipOptions.followPointer = false;
} else {
this.series.tooltipOptions.followPointer = true;
}
}
},
The issue with this implementation is that it's very poor in performance as it will calculate and determine the type of series AND setting the followPointer variable on every mouse movement. It's obvious that is pretty bad for performance since it's re-calculating it many times a second.
So my question is - how do I maintain this behavior of adjusting followPointer depending on the series but in a performant way?
I have a Highcharts plot which looks something like this
representing time series data for several different series. The thing is, sometimes the data for a particular series is "unavailable" (as you can see with the purple series above), and so the data values are NaN.
I want to have some way of "capping" each series wherever there are NaN values - my ideas was to use plotBands for the corresponding color of each series between all NaN values. However, I cannot seem to figure out if this is even possible. I have done plenty of research and found demos which treat "area with missing points" by simply not displaying anything (as my current chart does), such as this demo with this image:
but I'm imagining a treatment of NaN values that looks something like this instead (I apologize for my lack of artistry)
Is this possible with Highcharts?
You have to use load events in chat to add plot band
Fiddle
chart: {
type: 'area',
spacingBottom: 30,
events: {
load: function () {
var series_data=this.series[1].data;//this is second series data
for(var i=0;i<series_data.length;i++){
if(series_data[i].y==null){
//adds plot band
this.xAxis[0].addPlotBand({
from: i-1, //point back
to: i+1, //point after
color: '#0066ff',
});
}
}
}
}
},
I have a bar chart in c3js that uses category ticks on the x-axis.
The tick values I want to display are set upon loading the chart:
axis: {
x: {
tick:{
rotate: -35,
values: getTicks(displayData), //Return the tick values
multiline:false
},
type: 'categorized'
}
}
The reason for setting the ticks manually on load, is I need to update them later.
I need to allow users to update the x axis range dynamically, without loading new data, and I want the number of ticks displayed to remain the same, but with different values obviously.
To change the x axis range, I use this function:
chart.axis.range({min: {x: minRange}, max: {x: maxRange}});
There is no function called chart.axis.values.
Any ideas on how to change tick values dynamically?
EDIT -
To be really clear, I do not wish to update the chart's values. That includes the x and y axis values. I only wish to change what ticks are displayed.
Something like this should work.
axis: {
x: {
type: 'timeseries',
tick: {
values: function(x) { return customTicks(x) },
format: function(x) { return customFormat(x); },
}
}
}
customTicks() must return an array of Dates for this to work.
function customTicks(x) {
start = x[0];
end = x[1];
result = [];
for (var i = new Date(start); i <= end; i.setDate(i.getDate() + 1)) {
result.push(new Date(i));
}
return result;
}
customFormat() takes the date and returns the string for that date. This gives you the flexibility to customize the format as needed.
function customFormat(x) {
}
It may not be particularly elegant but does the job. One benefit of this approach is that you can use the same functions on more than one chart and they will all exhibit identical behavior always.
Problem #1 with this approach is that it seems to call customTicks() for every data point just as it does for customFormat().
Problem #2 is that it generates a lot of these errors:
d3.v3.min.js:1 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
This has already been flagged on Stackoverflow at Added non-passive event listener to a scroll-blocking 'touchstart' event
I am having the same difficulty updating the Y-Axis ticks values dynamically. I searched through the c3.js documents and was expecting to get something like chart.axis.values similar to chart.axis.range or chart.axis.max / chart.axis.min.
After digging into the Chart object on the console. I somehow managed to resolve my problem, but with a bit hacky way.
Please check the fiddle, I have played with the chart.internal which contains the chart's values on which graph is plotted. I changed those values and used chart.flush() method to redraw the chart.
According to https://github.com/c3js/c3/issues/827:
chart.internal.config.axis_x_tick_values = getTicks(displayData);
This works for me.
When I create a stockchart, I noticed by accident that highcharts seems to show or create points that do not actually exist in the data set.
Here is an jsfiddle that illustrates this:
( See added comment for the link, unable to just paste it because of idiotic rules on stackoverflow )
As you can see by hovering over the chart to show the tooltip, some of the data will show as having more than 2 decimals. In the data set there are no such data. All data has a maximum of 2 decimals.
Of course I can do Highcharts.numberFormat(this.y, 2) but to me this highlights a bigger problem since I am interested in the actual reported datapoint, and not approximations.
Is there a way to tell highcharts not to do this?
I've tried to use type:'spline' to show data points as illustrated here:
http://www.highcharts.com/demo/spline-irregular-time
But couldn't get spline and stockchart to coexist. I would like a stockchart but with actual points dotted or similar.
Data is grouped. You can disable data grouping by setting:
plotOptions: {
series: {
dataGrouping: {
enabled: false
}
}
},
Example: http://jsfiddle.net/3Ld2zmum/17/
Markers can be enabled using:
plotOptions: {
series: {
marker: {
enabled: true
},
Example: http://jsfiddle.net/3Ld2zmum/18/