logo
Tags down

shadow

Highcharts triangle (or any type of marker pointer) in stacked bars


By : user2174344
Date : October 18 2020, 08:10 AM
I hope this helps you . It can be done easily using Highcharts.SVGRenderer that provide direct access to the Highcharts rendering layer in order to draw primitive shapes. An existing chart's renderer can be accessed through Highcharts.Chart.renderer. Check the demo and code posted below.
code :
  chart: {
    type: 'bar',
    events: {
      render: function() {
        var chart = this,
          yAxis = chart.yAxis[0],
          series = chart.series[0],
          trWidth = 5,
          trHeight = 8,
          used = [
            48,
            33,
            83,
            62
          ],
          svgText,
          svgArrow,
          text,
          yText,
          xText,
          yTr,
          xTr;

        if (chart.customSvgElems) {
          chart.customSvgElems.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customSvgElems = [];

        series.data.forEach(function(serie, i) {
          text = used[i] + '% used';
          xText = serie.barX + serie.pointWidth / 2 + chart.plotTop + 3;
          yText = chart.plotLeft + chart.plotWidth / 2;
          svgText = chart.renderer
            .text(text, yText, xText)
            .add()
            .toFront();

          yTr = yAxis.toPixels(used[i]);
          xTr = serie.barX + serie.pointWidth + chart.plotTop;

          svgArrow = chart.renderer
            .path([
              'M', yTr, xTr,
              'L', yTr + trWidth, xTr + trHeight,
              'L', yTr - trWidth, xTr + trHeight,
              'z'
            ])
            .attr({
              fill: 'red',
              stroke: 'black',
              'stroke-width': 1
            })
            .add()
            .toFront();

          chart.customSvgElems.push(svgText);
          chart.customSvgElems.push(svgArrow);
        });
      }
    }
  }


Share : facebook icon twitter icon

How to display stacked bars in combination with normal bar in Highcharts?


By : YaSsEr- ElMaSrY
Date : March 29 2020, 07:55 AM
it helps some times Set in plotOptions stacked: 'normal' and then for each series you can define stack see: http://api.highcharts.com/highcharts#series.stack

Highcharts sizing bars in a Grouped and stacked barcharts


By : Sam
Date : March 29 2020, 07:55 AM
help you fix your problem So we have tried many things but have decided that Highcharts just isn't meant to do this sort of thing. We have given this feedback to our UX team as a limitation of what we can implement with Highcharts at this time. In the mean time we have made our labels more informative as a stop gap. This comes at the cost of making those labels very bulky.
I do agree with the UX design that sometimes it makes sense to group our stacked bars within our charts to make a clear and readable chart for our end user. I looked around at other charting frameworks and i didn't see anyone offering a way to do this. I would not say highcharts is lagging behind it's competitors but it could definitely differentiate it's self if it chose to implement a easy to use feature like this

Want to avoid spacing between each stacked bars in highcharts?


By : user3120391
Date : March 29 2020, 07:55 AM
may help you . Removing "pointWidth" solved the white space between the bars. But i need the bars should be off same height in all possible cases. I have solved the problem by setting height dynamically based on the categories count. say for example if am having only one category i have set the height for the chart as "210" and for 2 categories "270" like that. and removed pointWidth.
code :
$('#container-one').highcharts({

    chart: {
        type: 'bar',
        height: 210,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});
$('#container-two').highcharts({

    chart: {
        type: 'bar',
        height: 270,
        ...
        .
        .
    plotOptions: {
        bar: {
            pointPadding: 0,
            borderWidth: 0
        },
        series: {
            //pointWidth: 20,
            stacking: 'normal',
        .
        .
});

Highcharts stacked bar chart for multiple bars


By : user2410520
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I have a requirement where I need to display bar charts showing progress of release. Where I need to show overall along with each child release under it. , Your y_axis (or series) is misconfigured.
You have this setup:
code :
series: [
  [
    {datapoint 1 bar 1},
    {datapoint 2 bar 1},
    ...
  ], 
  [
    {datapoint 1 bar 2},
    {datapoint 2 bar 2},
    ...
  ]
]
series: [
  {datapoint 1 bar 1},
  {datapoint 2 bar 1},
  ...,
  {datapoint 1 bar 2},
  {datapoint 2 bar 2},
  ...
]
series: [
  {datapoint 1-N bar 1},
  {datapoint 1-N bar 2},
  ...
]
series: [
  {
    name: "1-PI-1",
    data: [{x: 0, y: 20.25}] //x: 0 = first category
  }, {
    name: "1-PI-2",
    data: [{x: 0, y: 30.38}]
  }, 
  ..., 
  {
    name: "1-PI-1",
    data: [{x: 1, y: 36.59}]  //x: 1 = second category
  },
  ...
]
var y_axis = 
  [{
    "name": "1-PI-1",
    "data": [{x: 0, y: 20.25}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 0, y: 30.38}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": "1-Alpha",
    "data": [{x: 0, y: 46.84}],
    "color": "#9933ff",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 0, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 0, y: 2.53}],
    "color": "#4d4d4d",
    "index": 5
  },
  {
    "name": "1-PI-1",
    "data": [{x: 1, y: 36.59}],
    "color": "#136e2a",
    "index": 0
  }, {
    "name": "1-PI-2",
    "data": [{x: 1, y: 34.15}],
    "color": "#3399ff",
    "index": 1
  }, {
    "name": " ",
    "data": [{x: 1, y: 2.44}],
    "color": "#4d4d4d",
    "index": 2
  }, {
    "name": " ",
    "data": [{x: 1, y: 26.83}],
    "color": "#4d4d4d",
    "index": 3
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 4
  }, {
    "name": " ",
    "data": [{x: 1, y: 0.0}],
    "color": "#4d4d4d",
    "index": 5
  }]

var x_axis = ["Project 1", "Project 2"]

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Project Progress'
  },
  xAxis: {
    categories: x_axis
  },
  yAxis: {
    min: 0,
    max: 100,
    reversedStacks: false,
    labels: {
      formatter: function() {
        return this.value + "%";
      }
    },
    title: {
      text: 'Percentage'
    }
  },
  credits: {
    enabled: false
  },
  tooltip: {
    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} %</b><br/>',
    shared: false
  },
  legend: {
    enabled: false,
    reversed: false
  },
  plotOptions: {
    series: {
      stacking: 'percentage',
      pointWidth: 60,
      dataLabels: {
        enabled: true,
        format: '{series.name}',
        style: {
          color: '#DCDCDC',
          fontSize: '13px',
          fontWeight: 'pointer',
          textOutline: '0px contrast',
          textShadow: 'none'
        }
      }
    }
  },
  series: y_axis
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

How to add footer for each series stacked horizontal bars in highcharts?


By : user3624349
Date : March 29 2020, 07:55 AM
Related Posts Related Posts :
  • Angular 2 routing with map
  • Length of observable array using 'as' syntax
  • Angular 6, directive ngOnChanges does not work with a lambda expression?
  • Angular animation jumps to undesired value upon completion
  • Inject a service with constructor in the main.ts
  • Angular Material Flex Layout - center aligning menu buttons
  • Http-Get-Function seems to be called multiple times in one call and always returns an empty array
  • VSCode Debugger Just sits there and does nothing
  • How to get file name instead of path with ngModel and ng2-file-upload?
  • Angular7 Form Validation on button push or property not in html
  • S3 Bucket referencing old code/api? Angular 5
  • ngModel kills output with white screen
  • Index does not load in ngFor Angular 2+
  • angular: How to change an imported component's class to change color?
  • Angular Http Caching and Race Conditions
  • Angular 6, how to update angular input field while looping?
  • How can I get html elements classes inside Angular Component?
  • Angular 6: How to use FormGroup to create formControlName dynamically?
  • # base routing is not working in angular 6
  • DXpopup position offset top relative to a variable
  • Angular 5 Material Multi-level Carousel style SideNav Menu (no dropdown)
  • Get the latest accumulated result of a scan instead of repeating it?
  • Angular redux @effect: Error on retriving the payload
  • Angular - add new row to mat-table when using FormControlArray as dataSource
  • Access to fetch at 'https://api.kendozone.com/auth/login' from origin[...] has been blocked by CORS policy
  • Can I use the component of One Application into another Application?
  • How to change date format in ngbDatepicker input field in angular bootstrap?
  • Warning messages are displaying even after the data present in the input field
  • ArrayBuffer as source (image tag) / Display image from Blob
  • How can I install highcharts-angular *and* highcharts?
  • Disable selected option from drop down One to drop down Two in angular 2 - Material
  • How can I debounce this Angular 7 async validator that uses combineLatest internally?
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org