Situation
I'm trying to have some space over the last xaxis options.
For example:
xaxis. min:-max:6
Only half of the last bar is shown, and if I try to use tickOption, it doesn't appear because it is outside of the canvas.
code:
http://jsfiddle.net/chalien/zEQe7/
THANKS
Your array isn't set right for the bar chart. You don't need to tell the plot rendered it is point number 1, 2, 3, etc... It knows it by himself.
Just change the array definition to:
[[4, 6, 2, 5, 6]]
And your graph will be rendered correctly, with or without the min and max definitions.
Here is the full code:
<script type="text/javascript">
$.jqplot('chart2', [[4, 6, 2, 5, 6]],
{ title:'Exponential Line',
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true
}
},
axes: {
xaxis: {
max:6,
min:0,
renderer: $.jqplot.LinearAxisRenderer
}
}
});
</script>
Related
How can I create minor ticks in plotly?
Minor ticks have shorter tick lengths and not labelled.
Can one specify a frequency, like 4 minor ticks between major ticks?
Please see below code for an example. You will need to use the minor attribute to set this. The length is controlled by ticklen, color by tickcolor, number of ticks by nticks, position (inside/outside) by minor_ticks and so on. More information is available here.
Code
import plotly.express as px
import pandas as pd
df = px.data.tips()
fig = px.scatter(df, x="total_bill", y="tip", color="sex")
fig.update_xaxes(minor=dict(ticklen=6, tickcolor="black", tickmode='auto', nticks=10, showgrid=True))
fig.update_yaxes(minor_ticks="inside")
fig.show()
So here is the javascript version for minor ticks:
var data = {
x: [1, 2, 3, 4, 5],
y: [3, 4, 1, 6, 3],
type: 'scatter'
};
var layout = {
yaxis: {
ticks: 'inside',
ticklen: 10,
tickcolor: 'black',
minor: {
ticks: 'inside',
ticklen: 6,
tickcolor: 'black'
}
}
};
Plotly.newPlot('myDiv', [data], layout);
<script src='https://cdn.plot.ly/plotly-2.14.0.min.js'></script>
<div id='myDiv'></div>
It seems minor_ticks='inside' works in python, but not in js. In js it should be minor: {ticks: 'inside'}.
PS: I just figured out it works with https://cdn.plot.ly/plotly-2.14.0.min.js, but not with
https://cdn.plot.ly/plotly-latest.min.js.
I would like to have my chartist charts on my website with no padding from left or right. I am using chartPadding: 0 as advised on several websites, but that did not really help. There is still too much air from the left or right border.
Here is jsFiddle. Help would be great!
var chart = Chartist.Bar('.ct-chart', {
labels: ['1.58', '2.58', '4.58', '5.2', '3.1'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
showPoint: true,
showLine: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: true,
offset: 50
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
// Listening for draw events that get emitted by the Chartist chart
chart.on('draw', function(data) {
// If the draw event was triggered from drawing a point on the line chart
if(data.type === 'label' && data.axis === 'x') {
// We just offset the label X position to be in the middle between the current and next axis grid
data.element.attr({
dx: data.x + data.space / 2
});
}
});
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart"></div>
You can put negative values to the chartPadding property, but that would not give you the effect you are aiming for.
As you render the chart in a normal div the default width value is set to 100%. What you can do as a work around is to restrict the width, so there is less space for the svg. This will affect the padding on the left/right.
Here the updated fiddle - https://jsfiddle.net/zeq3da7p/3/
You should know that I am new to Highcharts, so if my code or question seem weird, let me know.
Users can add data series to a chart.
When users click on the legend of a data series, that data series get's hidden from the chart and the legend get's grayed out. I want to change this behavior so that when users click on the legend of a data series, that data series should be completely removed from the chart, not only hidden.
I tried by writing the following code in highcharts-graph.js:
plotOptions: {
line: {
events: {
legendItemClick: function () {
this.remove(true);
}
}
}
}
This code removes the legend. But when a user adds another data series to the chart, the legend of the deactivated data series re-appears. So I believe that I need to modify the code to remove the data series instead of the legend.
To avoid error being thrown legendItemClick function could return false. To avoid same names or mixed indexes for series, it is possible to set names and indexes for new series.
JSFiddle: http://jsfiddle.net/jct0msdt/
$(function () {
$('#container').highcharts({
plotOptions: {
line: {
events: {
legendItemClick: function () {
this.remove(true);
return false;
}
}
}
},
series: [{
data: [1, 2, 3, 4, 5, 6, 7]
}, {
data: [3, 4, 5, 6, 7]
}, {
data: [2, 3, 4, 5, 6, 7]
}, {
data: [4, 5, 6, 7, 8, 9]
}]
});
var i = 5,
chart = $('#container').highcharts();
$('#button').click(function () {
chart.addSeries({
data: [i, i + 2, i + 4],
index: i,
name: 'Series ' + i
});
i++;
});
});
I am using the Highcharts API, and am using a Column Range chart to represent a schedule of events. The vertical axis represents event IDs, the horizontal axis represents the time.
User should be able to add a single event by clicking the chart.
Once added, user should be able to click the newly added event to remove it.
After removal, user should then be able to click the chart again to re-add the new event in another location.
For the most part, this all works fine - See JS Fiddle Demo
On the demo, first click the chart to add a red bar. Then click the red bar to remove it. This is exactly as it should work. The problem is that if you try to add the red bar again after removing it, the categories on the vertical axis increase.
How do I add a point, then remove it, then add it again without "regenerating" extra categories on the vertical axis?
Here's the code (working JS fiddle is linked above). I've tried to simplify it as much as possible in order to focus on the problem at hand.
$(function () {
var flag = false;
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
events: {
click: function (e) {
if (!flag) {
var y = e.yAxis[0].value;
this.series[0].addPoint({
name: 'New',
low: y,
high: (y + 10),
color: 'red',
events: {
click: function () {
this.remove();
flag = false;
}
}
});
flag = true;
}
}
}
},
xAxis: {
categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
tooltip: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[3.2, 8.5]
]
}]
});
});
I've read through the Highcharts API and tried everything I can think of but to no avail. Any help is appreciated. Thanks.
A collaborative effort between the OP and myself ...
Re-inject the original x-axis categories and series data :
events: {
click: function () {
this.remove();
chart.xAxis[0].update({
categories: xAxisCategories
});
chart.series[0].update({
data: seriesData
});
flag = false;
}
}
where :
chart = $('#container').highcharts()
xAxisCategories = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
seriesData = [....] (the original series data)
updated fiddle
highcharts would fit perfectly if not for one "but". The strip chart goes behind the axis. The line graph is beyond the axis numbers(50, 100, 150, 200). Watched others but have not found where you can easily stylize the behavior of the graph by accessing its axis
chart like this
Simply disable margins for chart, then play with yAxis.offset to move labels to the right: http://jsfiddle.net/Ywr3L/33/
$('#container').highcharts({
chart: {
marginLeft: 0,
marginRight: 0
},
xAxis: {
type: 'datetime'
},
yAxis: {
offset: -120
},
series: [{
data: [ 1, 2, 3, 2, 3, 2, 1, 2, 3, 2 , 1, 2, 3, 4],
type: 'areaspline'
}]
});
Note: without extra coding you can't start series shape before starting of gridlines.