jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

modified column chart

i have requirement to create chart like shown in image.. i was thinking of using bar chart.. but that always starts with zero.
can some one point me into proper direction..

thanks
Attachments
bar chart
bar chart
PastedGraphic-4.png (14.05 KiB) Viewed 1440 times
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: modified column chart

Hi jahnvi25,

I recommend you xrange chart for your needs. I prepared JSFiddle for you with online example of this chart, check it please.

Online example: https://jsfiddle.net/wchmiel/etcm86fs/
API reference: https://api.highcharts.com/highcharts/series.xrange

Best regards.
Wojciech Chmiel
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: modified column chart

Thanks a lot for reply..
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: modified column chart

You're welcome.

regards.
Wojciech Chmiel
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: modified column chart

i do have more questions..on same chart

how do i add marker on xrange or annotation.. and which one would be better ?

in the following example i need to highlight 69 on where in chart ( may be with black line or something)
and i want to show triangle above 100.34.. how would i do that ?

https://jsfiddle.net/60n9a3hu/30/

thanks
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: modified column chart

jahnvi25,

Markers and annotations are two different things in highcharts, so the answer to this question depends on your needs. In the example I posted you below you can find annotations added to points using id property.

To show a line on the chart you can use xAxis.plotLines property, however to show a line on the x-range point as well as triangle above 100.34 I suggest Highcharts.SVGRenderer. You can use it when the chart load event occur or inside callback function. For example:

Code: Select all

  function(chart) {
    var series = chart.series[2],
      xAxis = chart.xAxis[0],
      dataLabel = series.data[2].dataLabel,
      triangleSize,
      triangleX,
      triangleY,
      triangle,
      lineX,
      lineY,
      lineHeight,
      line;

    triangleSize = 8;
    triangleX = dataLabel.x + chart.plotLeft + dataLabel.width / 2 - triangleSize;
    triangleY = dataLabel.y + chart.plotTop - 5;

    lineX = xAxis.toPixels(series.data[1].x2 - series.data[1].x);
    lineY = series.data[2].shapeArgs.y + chart.plotTop;
    lineHeight = series.itemHeight;

    triangle = this.renderer.path([
    	'M',
      triangleX,
      triangleY,
      triangleX + triangleSize,
      triangleY + triangleSize,
      triangleX + 2 * triangleSize,
      triangleY,
      'z'])
    .attr({
      fill: 'red'
    })
    .add();

    line = this.renderer.path(['M', lineX, lineY, 'v', lineHeight]).attr({
      stroke: '#000',
      'stroke-width': '1px'
    }).add();

    line.toFront();
    triangle.toFront();

  });
Api reference:
https://api.highcharts.com/highcharts/a ... bels.point
https://api.highcharts.com/highcharts/xAxis.plotLines
https://api.highcharts.com/class-refere ... VGRenderer
https://api.highcharts.com/class-refere ... nt#toFront

Example:
https://jsfiddle.net/wchmiel/vhapk9eg/

Kind regards.
Wojciech Chmiel
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: modified column chart

thanks lot for reply. i actually need SVG renderer and it works better for our purpose. my only question is can i use actual axis point to draw line (instead of converting to pixel).. like in your example..
it shows data label at 69 (which is x2-x) and its tryin to draw line at the same point.. but line is not align with number 69..

how can i do that ??
thanks a lot again for helping.. highchart is great product..
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: modified column chart

jahnvi25,

1. Unfortunately, you have to use pixels to draw a line. However, you can convert axis point to pixels using toPixels method, so it is not a problem.

2. Data label in your example is drawn in the middle of the x-range point (not where 69 position on xAxis). To make label above the line in the proper position you can use two approaches:

2.1 Update series and add an appropriate offset to point dataLabel:

Code: Select all

var series = chart.series[2],
    labelX = series.data[1].x,
    labelX2 = series.data[1].x2,
    xLabelPosition = labelX + (labelX2 - labelX) / 2,
    labelXPixels = xAxis.toPixels(xLabelPosition),
    labelOffset = lineX - labelXPixels;
    
    series.update({
    	dataLabels: {
          enabled: true,
          y: -15,
          x: labelOffset,
          formatter: function() {
            return this.x2 - this.x;
          }
        }
    });
Demo:
https://jsfiddle.net/wchmiel/o6js1xbc/1/

Api reference:
https://api.highcharts.com/highcharts/s ... taLabels.x

2.2 Disable default point dataLabel and draw it with renderer:

Code: Select all

    var series = chart.series[2],
    lineX = xAxis.toPixels(series.data[1].x2 - series.data[1].x),
    lineY = series.data[2].shapeArgs.y + chart.plotTop,
    labelX = series.data[1].x,
    labelX2 = series.data[1].x2;
    
    var text = this.renderer.text(labelX2 - labelX, lineX - 7, lineY - 2).css({
    	'font-weight': 'bold',
      'font-size': '11px'
    }).add();
Demo:
https://jsfiddle.net/wchmiel/L4vcgpxa/1/

Kind regards.
Wojciech Chmiel
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: modified column chart

thnaks again for reply. sample program works great.. when i try to integrate with highstock (we are using that) main 3 color zones would not work. after some debugging i found that i had to add following css classes

Code: Select all

.rd-bullet .highcharts-color-0{
	fill:$score-positive;
}
/* yellow */
.rd-bullet .highcharts-color-1{
	fill:$score-less-negative;
}
/* red color */
.rd-bullet .highcharts-color-2{
	fill:$score-negative;
}
then it would work.. is there a way to turn off this style mode(assuming thats what its doing ) or am i missing something. my colors are dynamics.. so would it be better if we dont use css

thanks
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: modified column chart

jahnvi25,

Do you use styled mode files or not? Notice, that JavaScript files for styled mode are available under the /js/ folder on code.highcharts.com, whereas the files for classic mode are available on root and directly under each version folder on code.highcharts.com.

Styled mode link exmaple:

Code: Select all

<script src="https://code.highcharts.com/js/highcharts.js"></script>
Classic mode link example:

Code: Select all

<script src="https://code.highcharts.com/highcharts.js"></script>
More about styled mode you can find in the article I posted you below. If this is not the proper solution for your case, please provide me with a simplified example of your chart so that I could work on it.

Docs reference:
https://www.highcharts.com/docs/chart-d ... yle-by-css

Kind regards.
Wojciech Chmiel
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: modified column chart

thanks again for reply.we are using un-styled mode.. but i forgot and made mistake of taking xrange.js from under */js/* instead of normal modules folder..

Thanks a lot for reply.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: modified column chart

You're welcome :wink:
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Usage”