I'm implementing a data visualization feature in a self design WEB application by using Highcharts, but now I'm facing a problem, that is I can not add title of axis on my chart, I've survey and tried, but it still doesn't working.
The following is my web of that, and the original source.
WEB:http://140.138.152.9/test3D.html
Original source: http://www.highcharts.com/demo/3d-scatter-draggable
You can add title to xAxis and yAxis in this way.
yAxis: {
title: {
text:'here is Y Axis title',
}
},
xAxis: {
title: {
text:'here is X Axis title',
}
}
Here is the fiddle
Related
I'm importing a csv file using Highcharts cvsURL for a line chart. I'm using styledMode and I defined the default colors. Highcharts is using my stylesheet. Is there an easy way to tell each series which color to use?
I have lots of lines, so highcharts cycles through its 10 default colors. I need one of the colors to only be assigned to 2 specific series though.
Here is my code so far:
Highcharts.chart('container', {
chart: {
type: 'line',
styledMode: true //this totally separates the design from the svg.
},
data: {
itemDelimiter: ',',
csvURL: 'http://deq.at.utah.gov/wp-content/themes/deq/parts/charts/Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
I think the API said something about assigning classes to a series. Maybe that would work because I could make custom CSS for only those series, but I can't see how to do that using csvURL.
You can define color or className for series in this way:
data: {
csvURL: '...'
},
series: [{
color: '#00c735'
}, {
color: '#c4392d'
}]
Live demo: https://jsfiddle.net/BlackLabel/kj9udgat/1/
API Reference:
https://api.highcharts.com/highcharts/series.line.className
https://api.highcharts.com/highcharts/series.line.color
I have created a graph using highcharts which has 6 series. 3 are column series and 3 are spline series.spline series will collide or go within the column chart so having a requirement to add outline to spline series to have better viewing. Trying to add a border color for the spline series but unable to do. But the same is possible in column chart.If anyone have tried this before for spline series kindly help.
plotOptions: {
series: {
borderColor: '#303030'
}
},
this bordercolor is working for column but not in spline series
column chart
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/column-bordercolor/
would like to have border for the below series
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-box/
There is no such feature in Highcharts to set line border, but all is not lost.
You can achieve the effect you want, by adding new "fake" series basing on every line series, and set a couple of parameters.
Best place (in code) to do that would be the chart.events.load function, so there just find all series with line type:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
}
}
}
Then, iterate on all the series found, and create new one so that it would have color: [color_you_want], the same data and marker.symbol, increased lineWidth as well as marker.radius, won't be accessible by mouse and not visible in legend, just like below:
chart: {
events: {
load() {
var series = this.series.filter(elem => elem.type === 'line')
series.forEach(series => {
this.addSeries({
data: series.userOptions.data,
showInLegend: false,
color: '#000',
enableMouseTracking: false,
zIndex: -9999,
marker: {
symbol: series.symbol,
radius: series.options.marker.radius + 1
},
lineWidth: series.options.lineWidth + 2
})
})
}
}
}
Hope, it helps you.
Live example: http://jsfiddle.net/yw2tb4nm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.line.marker.symbol
https://api.highcharts.com/highcharts/series.line.marker.radius
https://api.highcharts.com/highcharts/series.line.showInLegend
https://api.highcharts.com/highcharts/series.line.enableMouseTracking
In my area chart I have three series which are presorted chronologically. This is what I am currently getting to display:
I'm using React which is why you see multiple renders, just ignore that. My dates that I am returning for the xAxis are in order but I'm only getting one. Why is that? Here is my code (using React Highcharts but it shouldn't matter I don't think):
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const dayStr = moment.unix(this.value).format('D');
const monthStr = moment.unix(this.value).format('M');
console.log(`${monthStr}/${dayStr}`, this.value);
return `${monthStr}/${dayStr}`;
},
align: 'left',
style: { "color": "#FFFFFF" }
},
title: {
text: 'Date',
style: { "color": "#FFFFFF" }
}
},
As you can see my formatter function is returning multiple dates but only one displays.
By default Highcharts algorithms decide which ticks to display (labels are drawn where the ticks are). Also some labels might be omitted when there's no enough space to place them.
Use tickPositions to force Highcharts to draw given ticks. You can also try tickPositioner to modify the ticks generated automatically.
API references:
https://api.highcharts.com/highcharts/xAxis.tickPositions
https://api.highcharts.com/highcharts/xAxis.tickPositioner
I'm wondering if it is possible to place two text titles at each side (negative/positive), centralized on each side.
I tried with this jsfiddle.
...
yAxis: [{
title: {
text: "right",
align: "right"
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
{
title: {
text: "left",
align: "left"
}
}
I tried to add another yxis, but it doesn't work.
you can only set xaxis title to
"low", "middle" by default, "high"
but for multiple title ,i think its not possible via api, it depends on your axis.
like you have one xaxis and 2 yaxis,
so you can have title separatly on both yaxis but not on xaxis.
the problem is you cant get the center point (0,0), if you can get Y of this point then you can update Y for the title.
I am using Highcharts to draw a chart of my data.When I am having a column chart and when I drill down in it, after drill down the chart moves up from the x-axis. This is the x-axis and y-axis settings:
xAxis: {
labels: {
rotation: -20,
align: 'right'
}
},
yAxis: {
min: 0
}
Let me know if anybody has any solution for this.
PLease update the version of the highcharts to 4.0.4, because the previous one had some bugs. It worked for me.