My Y axis is four categories.
My X Axis is 6 categories.
I won't always have data for each, but I need to show the tick marks all the times.
I've gone with inserting 0 counts for points that I don't want to show. But that still triggers mouseover events for hovering (which seems to be unacceptable). When I filter our the non-data all my tick marks go away.
Any suggestions?
Try 'null' instead of '0'
Here, 'gnu' still shows up as a category
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
columns: [
["setosa_x", "ant", "bat", "cat", "dog"],
["versicolor_x", "eel", "fox", "gnu", "hen"],
["setosa", "0.2, 0.2, 0.2, 0.2"],
["versicolor", 1.3, 1.3, null, 1.3],
],
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
},
type: "category"
},
y: {
label: 'Petal.Width',
type: "category"
}
}
});
Related
I have use highcharts series type 'flag' and have some data points.
I have a situation when my data points list from e.g. [-100;100]
But some flags value are out of this range. I cannot find any solution do show these flags which out of range.
The flag is not located on the line series because the x value is outside the range:
series: [{
id: "data",
data: [
[1569269259533, 100],
[1569269319534, 100]
]
}, {
type: 'flags',
useHTML: true,
y: -18,
id: 'flags',
onSeries: 'data'
}],
chart: {
events: {
load: function(e) {
var flagSerie = this.get('flags');
flagSerie.setData([{
x: 1569269299533,
count: 3
}]);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/rmonx6Lz/
API Reference: https://api.highcharts.com/highstock/series.flags.onSeries
I am trying to plot a bar chart with multiple datasets on a time series, however some of the data gets lost along the way.
for simplicity I have removed the ajax call and plotted some data:-
var config = {
type: 'bar',
data: {
datasets: [{
label: "Dataset 1",
data: [{
x: new Date('2017-03-01'),
y: 1
}, {
x: new Date('2017-03-02'),
y: 2
}, {
x: new Date('2017-03-03'),
y: 3
}, {
x: new Date('2017-03-04'),
y: 4
}],
backgroundColor: "red"
}, {
label: "Dataset 2",
data: [{
x: new Date('2017-03-01'),
y: 1
}, {
x: new Date('2017-03-02'),
y: 2
}, {
x: new Date('2017-03-03'),
y: 3
}, {
x: new Date('2017-03-04'),
y: 4
}],
backgroundColor: "blue"
}]
},
options: {
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
using the above configuration dataset 1 point 1 and dataset 2 point 4 (so basically the first and last points) do not get drawn.
Any ideas where I am going wrong here?
Also I am using this time series version because I was hoping to have "gaps" in the chart, for example dataset 1 might have a series for 2017-03-01 and dataset 2 might not, in this case dataset 2's next date will bunch up to dataset 1's making it look like it does belong to that date.
Any help would be appreciated
I had the exact same issue when displaying a bar chart with time as the X axes.
Inside your xAxes you need to add an additional configuration option:
xAxes: [{
offset: true
}]
Description from the ChartJS documentation:
If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to true in the bar chart by default.
ChartJS Documentation Cartesian
I'm trying to use linear scale on x-axis in my chart.js chart.
I add some code beause stackoverflow makes it obligatory when adding a jsfiddle url, but I don't see the point :
var options={
scales:{
xAxes:[{ type: "linear"}]
}
};
I'm getting a very strange chart (2nd one) : http://jsfiddle.net/t0krmau8/
In the first chart, I'd like to get more space between 2 and 4 (2 times more space than between 1 and 2), that's why I'm using a linear scale.
Am I using the linear scale wrong? Or should I use something else?
Thanks
You're not providing the data in correct format for the scatter line plot.
The correct format to provide the data is described by the following example from Chart.js Docs.
var scatterChart = new Chart(ctx/* your canvas context*/, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});
source
I think the x and y should be separable into different arrays, but you can always do a combination step and combine them into objects.
I have a simple c3js line chart w/3 different lines. When I "unselect" all 3 data sources, the x-axis tick values disappear. I was wondering if there was anyway to reverse this behavior? I'd like to show the x-axis tick values even when there is no data present.
The xaxis tick values are of a 'timeseries' type. Thanks!
Here is my c3 config for the line chart:
bindto: '#test',
data: {
x: 'date',
xFormat: '%m%d',
columns: [],
},
legend: {
position: 'bottom',
},
axis: {
y: {
tick: {
format: function (d) { return d + '%'; },
count: 5,
},
max: 100,
padding: {
top: 0,
bottom: 0,
},
},
x: {
type: 'timeseries',
tick: {
culling: false,
},
},
},
color: {
pattern: [testRateColor, firstRateColor, secRateColor],
},
Unfortunately this functionality is baked into c3.js and the only way to change this (aside from working purely from d3) is monkey patching. You will find the offender on line 6814 of c3.js:
tickExit = tick.exit().remove(),
If you change this to:
tickExit = function() {},
The ticks are no longer removed.
I have implemented the following project. There are two lines on the chart.
However, I want to change position of x axis to move 0 at the center.
seriesDefaults: {
type: "scatterLine",
},
series: [{
name: "Path1",
data: stats,
markers: {
visible: false,
color: 'red'
}
}, {
name: "Path2",
data: stats2,
markers: {
visible: false
}
}],
http://jsfiddle.net/3yhbyy2g/13/
I need to customize x axis and reverse the datasource to display as follows:
Here is the solution:
All I did is to add the following lines of code:
min:-5000,
axisCrossingValue: [-5000, 0],
http://jsfiddle.net/3yhbyy2g/19/